Vuex, api, SSR, module

Vuex, api, SSR, module

vuex

​​https://vuex.vuejs.org/zh/guide/actions.html​​

单向数据流

单例模式 & 多个组件共享状态

State & 状态注入

​​Vue.use(Vuex)​​ 将状态从根组件“注入”到每一个子组件中

​​mapState​​

Getter

store 的计算属性

​​mapGetters​​

Mutation

常量 & 事件类型

mapMutations & 同步事务

Action

​​https://vuex.vuejs.org/zh/guide/actions.html​​

​​mapActions​​

Async & Promise

Module

局部状态

context && {...obj} , {key1, key2}

namespace

root

​​Getter (state, getters, rootState, rootGetters) { ... }​​

​​Action (ctx, payload) { ... }​​

​​mapState, mapGetters, mapActions​​ 和 ​​mapMutations​​

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

​​createNamespacedHelpers​​

​​https://vuex.vuejs.org/zh/api/#mapstate​​

vue & SSR

​​https://ssr.vuejs.org/guide/structure.html#avoid-stateful-singletons​​

---

Vuex

store data flow

2. Components dispatch> Actions commit> Mutations ==mutate=> State render> Components
3. Components commit> Mutations ==mutate=> State render> Components

• Actions & Async
• Mutations & Sync

xgqfrms