module

由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter。

store.js

import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex)const moduleA = {state: {countA: 0},getters: {totalA: (state) => (symbol) => {return (symbol || '$') + state.countA}},mutations: {incrementA(state, payload){state.countA += (payload || 1);}} }const moduleB = {state: {countB: 0},getters: {totalB: (state) => (symbol) => {return (symbol || '$') + state.count}},mutations: {incrementB(state, payload){state.countB += (payload || 1);}} } const store = new Vuex.Store({modules: {moduleA,moduleB} })export default store

component

<input type="button" value="increment" @click="add()"/> <span>{{countA}}</span> <script>import {mapState, mapMutations, mapActions} from 'vuex';export default {methods: {...mapMutations(['incrementA']),...mapMutations({add: 'incrementA'})},computed: {...mapState({countA: state => state.moduleA.countA})}} </script>

小結

• 每個模塊中的 state、mutation、action、getter 都是獨立的作用域
• 不同模塊間的 state、getter 的屬性存在同級同名的情況下會報錯
• mutation、action 等方法同名的話會所有模塊一起觸
• 解決以上問題，需要給每個模塊再做一層作用域分離——命名空間

命名空間

store.js

import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex)const moduleA = {namespaced: true,state: {count: 0},getters: {total: (state) => (symbol) => {return (symbol || '$') + state.count}},mutations: {increment(state, payload){state.count += (payload || 1);}} }const moduleB = {namespaced: true,state: {count: 0},getters: {total: (state) => (symbol) => {return (symbol || '$') + state.count}},mutations: {increment(state, payload){state.count += (payload || 1);}} } const store = new Vuex.Store({modules: {moduleA,moduleB} })export default store

帶命名空間的綁定函數

methods: {...mapMutations(['moduleA/increment']),...mapMutations({add: 'moduleA/increment'}) }, computed: {...mapState({countA: state => state.moduleA.count}) }

總結

以上是生活随笔為你收集整理的Vue 教程第十七 篇—— Vuex 之 module的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。