一起走进Vue.js——vuex

上期我们学习了 Vue.js 的 vue-router ，这期我们主要学习 vuex。

vuex 是一个专门为 vue.js 设计的集中式状态管理架构。所谓的状态，就是在 data 中的属性需要共享给其他 vue 组件使用的部分，简单的说就是 data 中需要共用的属性。比如，我们有几个页面要显示用户名称和用户等级，或者显示用户的地理位置，如果我们不把这些属性设置为状态，那每个页面遇到后，都会到服务器进行查找计算，返回后再显示。在中大型项目中会有很多共用的数据，所以 Vue 给我们提供了 vuex 。

一、写个简单 demo

先看下效果：

具体操作：

1、新建 vuexTest 项目，安装 vuex ：npm install vuex --save

package.json 项目基本信息文件的 “dependencies” 生产环境中出现 vuex 及版本号，表示安装成功。

注：项目名称不要跟 vuex 同名，否则会安装不成功。

2、在 src 文件夹下新建 vuex 文件夹，然后在 vuex 文件夹下新建 store.js 文件，引入 vue 和 vuex，并使用 vuex

3、在 store.js 文件中增加一个 count 常量，并用export default 封装代码，让外部可以引用

4、在 components 文件夹下新建一个 count.vue 模板，在模板中我们引入我们刚建的store.js文件，并在模板中用 {{$store.state.count}} 输出 count 的值

5、在 router/index.js 中配置路由：

6、在 vuex/store.js 里添加增加和减少 count 常量的方法，并用 export default 封装，让外部可以引用

7、在 src/components/count.vue 中引用方法

二、state 访问状态对象

把 store.js 中的值赋值给我们模板里 data 中的值的三种方式：

1、通过 computed 的计算属性直接赋值

2、通过 mapState 的对象赋值

3、通过 mapState 的数组来赋值

三、Mutations 修改状态

1、传值

2、模板获取 Mutations 方法

四、getters 计算过滤操作

ex：我们现在要对 store.js 文件中的 count 属性进行一个属性的操作，就是在它输出前，给它加上100

首先：我们在 store.js 里用 const 声明我们的 getters 属性

然后：我们在 count.vue模板中对 computed 进行配置

用 mapGetters 简化模板写法：

五、actions 异步修改状态

actions 和之前讲的 Mutations 功能基本一样，不同点是，actions 是异步的改变 state 状态，而 Mutations 是同步改变 state 状态

1、在 store.js 中声明 actions

在 actions 里写了两个方法 addAction 和 reduceAction ，在方法体里，我们都用 commit 调用了Mutations 里面的方法，这两个方法传递的参数不一样：

● context：上下文对象，可以理解为 store 本身；

● ：直接把 commit 对象传递过来，可以让方法体逻辑和代码更清晰明了。

2、模板中使用

3、异步检测

六、module 模块组

1、声明模块组：

在 vuex/store.js 中声明模块组，我们还是用我们的 const 常量的方法声明模块组。代码如下：

constmoduleA={

state,mutations,getters,actions

}

声明好后，我们需要修改原来 Vuex.Store 里的值：

exportdefaultnewVuex.Store({

modules:{a:moduleA}

})

2、在模板中使用：

在模板中使用 count 状态，用插值的形式写入

{{$store.state.a.count}}

如果想用简单的方法引入，需要我们的计算属性中 reture 我们的状态

computed:{

count(){

returnthis.$store.state.a.count;

}

},