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} ,

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

1. Components dispatch> Actions commit> Mutations ==mutate=> State render> Components

2. Components commit> Mutations ==mutate=> State render> Components

• Actions & Async
• Mutations & Sync