vuex使用之state访问状态对象

引入vuex
1.利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

需要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的。

2.新建一个vuex文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。

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

3.使用我们vuex,引入之后用Vue.use进行引用。

Vue.use(Vuex);

一、通过computed的计算属性直接赋值
computed属性可以在输出前,对data中的值进行改变,我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。

computed:{
  count(){
    return this.$store.state.count;
  }
}

二、通过mapState的对象来赋值
我们首先要用import引入mapState。

import {mapState} from 'vuex';

然后还在computed计算属性里写如下代码:

computed:mapState({
  count:state=>state.count
})

三、通过mapState的数组来赋值

computed:mapState(["count"])

 



posted @ 2017-08-18 13:16  鱼樱前端  阅读(1296)  评论(0编辑  收藏  举报