随笔- 15 文章- 0 评论- 1 阅读- 22299

vuex分了多个模块，利用语法糖调用不同模块里的方法

// store/modules/a.js
export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}
  
// store/modules/b.js
export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}
  
// store/index.js
import Vuex from 'vuex';
import A from './modules/a';
import B from './modules/b';
  
const store = new Vuex.Store({
  modules: {
    a: A,
    b: B
  }
});
  
export default store;

//vue页面<script>
import { mapState, mapMutations, mapActions } from 'vuex';
  
export default {
  computed: {
    // 使用mapState生成计算属性
    ...mapState({
      countA: state => state.a.count, // 从a模块获取状态
      countB: state => state.b.count, // 从b模块获取状态
    }),
  },
  methods: {　　  ...mapMutations('a', ['update']),
    　　// 使用mapActions生成方法
　　  ...mapActions({
　　　　incrementA: 'a/increment', // 从a模块调用action
　　　　incrementB: 'b/increment', // 从b模块调用action
　　　}),　　　someMethod(){　　　　this.update(newValue); // 调用模块a中的mutation　　　}  },
};
</script>