一起走进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;

}

},

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180515G01N8H00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券