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基本介绍,包含实战示例及代码(基于Vue2.X)

    VUEX 1 VUEX基本介绍 1.1 官方API 1.2 什么是vuex 1.3 Vuex使用场景 1、Vuex...

  • 【文档笔记】-Vuex

    什么是vuex? vuex文档: https://vuex.vuejs.org/zh/[https://vuex....

  • vuex配置

    vuex配置 目录 vuex的五个核心 配置vuex vuex持久化 一、vuex五个核心概念 State 定义状...

  • Vuex

    安装Vuex cnpm install vuex --save-dev Vuex是什么? 这是[Vuex的官网](...

  • Vuex

    1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局...

  • vuex

    Vuex介绍: Vuex官网:http://vuex.vuejs.org/ Vuex是实现数据状态管理的技...

  • vuex+axios 的开发流程记录

    相关文档 vuex: https://vuex.vuejs.org/zh/ 是否有必要使用vuex vuex是vu...

  • 2019-06-07

    import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...

  • 配置 vuex 和 vuex 本地持久化

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

网友评论

    本文标题:vuex

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