module

由于使用單一狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。

為了解決以上問(wèn)題，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 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>

小結(jié)

• 每個(gè)模塊中的 state、mutation、action、getter 都是獨(dú)立的作用域
• 不同模塊間的 state、getter 的屬性存在同級(jí)同名的情況下會(huì)報(bào)錯(cuò)
• mutation、action 等方法同名的話會(huì)所有模塊一起觸
• 解決以上問(wèn)題，需要給每個(gè)模塊再做一層作用域分離——命名空間

命名空間

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

帶命名空間的綁定函數(shù)

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。