Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)


Posted in Javascript onSeptember 15, 2017

在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的

vuex是什么东东呢?

组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),但可以看到如果我们通过最基本的方式来进行通信,一旦需要管理的状态多了,代码就会变得十分臃肿和庞大。对所有状态的管理便会显得力不从心,因此,vuex出现了,他就是帮助我们把公用的状态全抽出来放在vuex的容器中,然后根据一定的规则来进行管理,我们赶紧来用一下吧,想要掌握vuex的用法,你应该要掌握组件之间的通信,如果不了解,请参考以下这两篇文章:

搭建环境开始:

在git命令行下,执行以下命令完成环境的搭建:

1,npm install --global vue-cli  安装vue命令行工具

2,vue init webpack vue-demo   使用vue命令生成一个webpack项目,项目名称为vue-demo

3,cd vue-demo 切入项目

4,npm install安装package.json中的所有依赖包

5,npm run dev运行项目

然后删除默认的Hello.vue组件,把App.vue整理成以下样子

<template>
 <div id="app">
 这是一个空的app
 </div>
</template>

<script>
 export default {
  name : 'app'
 }
</script>

 把router下面index.js文件修改如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
  }
 ]
})

基本环境搭建完毕之后,开始安装vuex了

安装命令:npm install vuex --save-dev

一、安装完成之后,在main.js中引入,并注册store:这样我们就能通过this.$store来获得这个容器了

main.js代码:

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './vuex/store'

Vue.use(Vuex)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})

二、在src目录下创建vuex目录,然后在vuex目录下创建store.js,用于存放所有的状态(改变的数据)

store.js代码:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
  userName : 'ghostwu'
 }
})

export default store

在state存储了一个状态userName

三、将状态中的数据渲染到组件中

在components下面新建一个组件Main.vue,代码如下:

<template>
  <div>
    <h3>{{myName}}</h3>
  </div>
</template>
<script>
  export default {
    name : "Main",
    computed : {
      myName (){
        return this.$store.state.userName;
      }
    }
  }
</script>

通过一个计算属性获取到存储在全局容器store中state保存的状态值

四,在App.vue中引入组件Main.vue

App.vue代码:

<template>
 <div id="app">
  <Mainc></Mainc>
 </div>
</template>

<script>
import Mainc from './components/Main.vue';
export default {
 name: 'app',
 components : {
  Mainc
 }
}
</script>

这个时候,就能看见在页面上把store容器中 state的userName的值读取出来了, 如果修改userName的值,页面上也会发生变化

五、,我们通过一些交互来改变状态,看下组件是否能收到state的值

在components组件下新建一个Header.vue组件,代码如下:

<template>
  <div>
    <input type="text" v-model="msg" />
    <input type="button" v-on:click="setName" value="点我" />
  </div>
</template>
<script>
  export default {
    name : 'Header',
    data(){
      return {
        msg : ''
      }
    },
    methods : {
      setName(){
        this.$store.state.userName = this.msg;
      }
    }
  }
</script>

App.vue引入组件Header

App.vue代码如下:

<template>
 <div id="app">
  <Headerc></Headerc>
  <Mainc></Mainc>
 </div>
</template>

<script>
import Headerc from './components/Header.vue';
import Mainc from './components/Main.vue';
export default {
 name: 'app',
 components : {
  Headerc,
  Mainc
 }
}
</script>

当我点击按钮的时候,改变state中useName的值,Main组件中的state.userName的值也会跟着更新,这种改变方式很好理解,接下来我们看下vuex推荐的状态改变方式

六、vuex推荐的状态改变方法

在store.js中新建一个mutations,存放被修改的状态

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
  userName : 'ghostwu'
 },
 mutations : {
  showUserName( state, msg ){
   state.userName = msg;
  }
 }
})

export default store

其中第一个参数 state 就是 $store.state,第二个参数 msg 需要另外传入,这个参数我们通过Header.vue的点击事件中的方法来传递

Header.vue代码:

<template>
  <div>
    <input type="text" v-model="msg" />
    <input type="button" v-on:click="setName" value="点我" />
  </div>
</template>
<script>
  export default {
    name : 'Header',
    data(){
      return {
        msg : ''
      }
    },
    methods : {
      setName(){
        this.$store.commit( 'showUserName', this.msg );
      }
    }
  }
</script>

$store.commit 把this.msg的值提交给showUserName。state就收到了改变的状态了,这就是一个vuex最基本的用法和作用

以上这篇Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中“+=”的应用
Feb 02 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
jQuery动态添加
Apr 07 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
如何提高Dom访问速度
Jan 05 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
vue中template的三种写法示例
Oct 21 Javascript
uniapp实现可滑动选项卡
Oct 21 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 #Javascript
基于Vue生产环境部署详解
Sep 15 #Javascript
基于Vue单文件组件详解
Sep 15 #Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 #Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 #Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 #Javascript
VsCode插件整理(小结)
Sep 14 #Javascript
You might like
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JavaScript多并发问题如何处理
2015/10/28 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python编写打字训练小程序
2019/09/26 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
英文求职信结束语大全
2013/10/26 职场文书
外语系毕业生自荐信范文
2013/12/16 职场文书
微笑服务演讲稿
2014/05/13 职场文书
初中学习计划书范文
2014/09/15 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
js 数组 fill() 填充方法
2021/11/02 Javascript