Vuex知识总结

一，图解Vuex

二，Vuex核心概念

1.state

唯一的数据源：我们需要把任何一个组件中需要抽取出来的变量放入到state中去

单一的状态树：只要把store注册到app.js中，所有组件都可以使用其中的状态

官网定义：

2.Getter

通过Getters可以派生出一些新的状态

注意：getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

注意：getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

官网定义：

3.Mutation

更改Vuex的store中的状态的唯一方法时提交mutation 

传入额外参数方式【提交载荷（Payload）】：

1.

store.commit('increment', 10)

2.载荷是对象 

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

3.对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
  type: 'increment',
  amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此处理函数保持不变：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

 

 注意：Mutation 必须是同步函数的原因？

回调函数中数据状态的改变无法追踪

官网定义：

4.Action 

 Action提交的是mutation，而不是直接变更状态

注意： store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise

官网定义：

5.module

注意：

 

三，疑惑问题整理

1.this.$store.dispatch和this.$store.commit区别

this.$store.dispatch:异步操作，将数据提交至action中，在action中可以向后台发起数据请求操作，获取到数据再通过commit方法提交至mutations中。

this.$store.commit:同步操作，可直接将数据提交至mutations中。

根据数据的实际情况进行两种方式的选择！

2.Vuex模块化情况下...mapState,...mapGetters,...mapAction,...mapMutations，获取对应模块下的数据操作方法

比如：...mapActions('模块名', ['方法']) 其他的类似