多实例

允许创建多实例，各store实例彼此互相独立，状态互不干扰，不需要考虑命名空间的问题，而且可以随时动态创建一个新的store，更灵活且移植性更高。相对较于modules，更推荐多实例模式

联合多个store实例

如果需要使用外部store的数据，mpx 也提供的createStore支持传入deps参数，表示注入的外部store。在store内部访问外部store的资源使用如下方式（都是加namespace形式的path访问模式）。由于注入store的各部分（state, getters, mutations, actions）是 以key作为namespace merge在options对应属性内部的，所以deps的key要防止冲突

基础例子

例子：

  1. const store1 = createStore({
  2.   state: {
  3.     a: 1
  4.   },
  5.   getters: {
  6.     getA(state) {
  7.       return state.a
  8.     }
  9.   },
  10.   mutations: {
  11.     setA(state, payload) {
  12.       state.a = payload
  13.     }
  14.   },
  15.   actions: {
  16.     actionA({commit}, payload) {
  17.       commit('setA', payload)
  18.     }
  19.   }
  20. })
  21. const store2 = createStore({
  22.   state: {
  23.     b: 1
  24.   },
  25.   getters: {
  26.     getB(state, getters) {
  27.       // 访问外部store1的数据，按路径访问
  28.       return state.b + state.store1.a + getters.store1.getA
  29.     }
  30.   },
  31.   mutations: {
  32.     setB(state, payload) {
  33.       state.b = payload
  34.     }
  35.   },
  36.   actions: {
  37.     actionB({dispatch, commit}, payload) {
  38.       // 同理，mutations、actions访问外部store1的方法时，也是按路径访问
  39.       commit('store1.setA', payload)
  40.       dispatch('store1.actionA', payload)
  41.       commit('setB', payload)
  42.     }
  43.   },
  44.   deps: {
  45.     store1
  46.   }
  47. })

多store注入下的’store.mapGetters、store.mapMuations、store.mapActions’

  2. import {createStore, createComponent} from '@mpxjs/core'
  3. const store1 = createStore({
  4.   state: {
  5.     a: 1
  6.   },
  7.   getters: {
  8.     getA(state, getters) {
  9.       return state.b + state.store1.a + getters.store1.getA
  10.     }
  11.   },
  12.   mutations: {
  13.     setA(state, payload) {
  14.       state.a = payload
  15.     }
  16.   },
  17.   actions: {
  18.     actionA({commit}, payload) {
  19.       commit('setA', payload)
  20.     }
  21.   }
  22. })
  23. const store2 = createStore({
  24.   state: {
  25.     b: 1
  26.   },
  27.   getters: {
  28.     getB(state) {
  29.       return state.b + state.store1.a
  30.     }
  31.   },
  32.   mutations: {
  33.     setB(state, payload) {
  34.       state.b = payload
  35.     }
  36.   },
  37.   actions: {
  38.     actionB({dispatch, commit}, payload) {
  39.       commit('store1.setA', payload)
  40.       dispatch('store1.actionA', payload)
  41.       commit('setB', payload)
  42.     }
  43.   },
  44.   deps: {
  45.     // xx: store1
  46.     store1
  47.   }
  48. })
  50. // 组件内部使用store
  51. createComponent({
  52.   computed: {
  53.     ...store2.mapGetters(['getB', 'store1.getA'])
  54.   },
  55.   methods: {
  56.     ...store2.mapMutations(['setB', 'store1.setA']),
  57.     ...store2.mapActions(['actionB', 'store1.actionA'])
  58.   }
  59. })