vuex

作者: 放任自由f0 | 来源:发表于2019-06-29 21:21 被阅读0次
    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]
    })
    

    相关文章

      网友评论

        本文标题:vuex

        本文链接:https://www.haomeiwen.com/subject/vhkmcctx.html