vuex的总结

针对于目前俺接触的项目来说，有很多都是登录后存储用户个人信息或者是一个页面分组件开发后请求同一接口后存储vuex中传给组件。

红色框是vuex的相关文件。
然后先说一下理论吧。

这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

1.state
state中都是存储状态或者是变量。

在这个项目实例中就存储了很多数据和状态。
如果我们在vuex中写入的数据，想要被组件引用，就需要在需要的组件中引用。

import { mapState} from 'vuex'

//当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'(这是你在vuex中的stats中声明过的变量名)
])

//mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符（现处于 ECMAScript 提案 stage-4 阶段），我们可以极大地简化写法：
computed: {
  ...mapState({
    // ...
  })
}

　　

2.getters

getters：对数据获取之前的再次编译，可以理解为state的计算属性。
下图为例，对state中的navSizeControl这个数据进行再加工。

通过属性访问
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值。

let xxx = this.$store.getters.xxxxxxx

　　

在组件中使用getters

首先在vuex中

myCount(state){
 return 123
}

在组件中引用

import { mapGetters } from 'vuex';
export default {
  ...
  computed:{
  ...mapGetters({"myCount"})
  }
}

　　

3.Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

在组件中我们想把某一数据存入vuex中，就需要

文档是这么说的：

你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法。

他说这么一堆，我特么也没咋看懂啊！！！就是用 commit就完了呗。

官方文档继续说了，这次我看懂了！

Mutation 需遵守 Vue 的响应规则
既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

最好提前在你的 store 中初始化好所有所需属性。

当需要在对象上添加新属性时，你应该

使用 Vue.set(obj, ‘newProp’, 123), 或者

以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：

state.obj = { ...state.obj, newProp: 123 }

在组件中提交Mutation ：

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
    someThing(){
    //第一种调用方法
       this.$store.commit('increment') //把vuex中的Mutation传进来，然后进行操作，increment是Mutation中的方法，直接调用。并且可以修改vuex中的state的值。
   // 第二种调用方法
      this.increment()
    }
  }
}

　　Mutation 必须是同步函数：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
如果要写入异步函数，就需要接下来出场的人了。Action！

4.Action
Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

在vuex中，actions访问mutation需要用到context.commit

例子如下：

actions：{
   myIncrease(context){
    context.commit('increment')
    也可以axios请求
   }
}

　　在组件中使用action

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    }),
     someThing(){
         this.increment()
     }
  }
}