工作生活

vuex

2019-06-29  本文已影响0人  放任自由f0
const moduleA = {
  namespaced: true,
  state: {
    moduleAData: 'a'
  },
  getters:{
    moduleAData: state => state.moduleAData,
  },
  mutations: {
    SET_DATA_A: (state, payload) => {
      state.moduleAData = payload
    }
  },
  actions: {
    setData({ commit }, payload) {
      console.log('a')
      commit('SET_DATA_A', payload)
    }
  }
}

const demoB = {
  namespaced: true,
  state: {
    b: 'b'
  },
  getters:{
    dataB: state => state.b,
  },
  mutations: {
    SET_DATA_B: (state, payload) => {
      state.b = payload
    }
  },
  actions: {
    setDatab({ commit }, payload) {
      console.log('b')
      commit('SET_DATA_B', payload)
    },
    someAction:{
      // root:true,
      handler({commit},payload){
        commit('SET_DATA_B',payload)
      }
    }
  }
}

export default new Vuex.Store({
  modules:{
    a: moduleA,
    b:moduleB
  }
})

使用
getter
...mapGetters('a',['moduleAData']),
...mapGetters('b',['moduleBData']),
或者
...mapGetters('a',{ss:'moduleAData'}),
...mapGetters('b',{bdata:'dataB'})

action
...mapActions(['a/setData','namespace/action']),
this['a/setData']('sdsds')
或者 
this.$store.dispatch('a/setData','sdsds')
或者
...mapActions('a',{
      'aaa':'setData'
    }),
this.aaa('新的a数据')
或者
...mapActions('a',['setData']),
...mapActions('b',['setDatab']),
this.setData('新的a数据')

插件 plugins

Vuex 的 store 接受 plugins 选项,这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数,它接收 store 作为唯一参数

在插件中不允许直接修改状态——类似于组件,只能通过提交 mutation 来触发变化。
通过提交 mutation,插件可以用来同步数据源到 store。
使用

const syncStorage = (store) => {
 // 当 store 初始化后调用
 store.subscribe((mutation, state) => {
   // 每次 mutation 之后调用
   // mutation 的格式为 { type, payload }
   // console.log(mutation, state)
   if(mutation.type=='a/SET_DATA_A'){
     store.dispatch('b/setDatab','111111')
   }
 })
}
export default new Vuex.Store({
 strict: true,
 state,
 getters,
 mutations,
 actions,
 plugins: [syncStorage]
})
上一篇 下一篇

猜你喜欢

热点阅读