vuex state访问状态对象

vuex是一个专门为vue.js设计的集中式状态管理架构

状态：在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

 

 vuex有5种属性，分别是：state、getters、mutations、actions、modules

vuex的state特性（数据源）

（1）Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data

（2）state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

（3）它通过mapState把全局的state和getters映射到当前组件的computed计算属性中

vuex的getters特性（store的计算属性，多组件复用）

（1）getters可以对State进行计算操作，它就是Store的计算属性

（2）虽然在组件内也可以做计算属性，但是getters可以在多组件之间复用

（3） 如果一个状态只在一个组件内使用，是可以不用getters

vuex的mutations特性（改变store中状态的唯一方法、执行同步操作）

改变store中state状态的唯一方法就是提交mutation，就很类似事件。

每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。

我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。

actions类似于mutations，不同在于：Action提交的是mutation，而不是直接变更状态；

Action可以包含任意异步操作，Action函数接受一个与store实例具有相同方法和属性的 context对象，因此你可以调用context.commit提交一个mutation，或者通过context.state 和context.getters来获取state和getters。

Action 通过store.dispatch方法触发：store.dispatch('increment')

vuex的modules特性

Module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，

每个模块中拥有自己的state、mutation、action和getter

将store里面的对象赋值给内部对象有三种实现方式

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

computed属性可以在输出前，对data中的值进行改变，我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。

 // 1、利用computed计算属性
 computed: { 
     count() {
         return this.$store.state.count
     }
 },

二、通过mapState的对象来赋值

（1）首先要用import引入mapState

import {mapState} from 'vuex'

（2）在computed计算属性里使用ES6的箭头函数来给count赋值

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

 三、通过mapState的数组来赋值

 computed: mapState(["count"])

这个是以上三种赋值方式中最简单的赋值方式，在项目中常用