除非是非常大的項目,否則不推薦使用modules.
//1定義模塊組
var moduleA = {
state,
mutations,
actions
};
//2聲明模塊組
modules:{
a:moduleA
}
//3在App.vue中調用
<p>{{$store.state.a.count}}</p>
1.在retore.js
import Vue from 'vue' import Vuex from 'vuex' //使用vuex模塊 Vue.use(Vuex); //聲明靜態常量為4 const state = { count : 4 }; const mutations = { add(state,n){ state.count +=n.a; }, sub(state){ state.count--; } }; const actions = { //2種書寫方式 addplus(context){ //可以理解為代表了整個的context context.commit('add',{a:10}) }, subplus({commit}){ commit('sub'); } }; //1定義模塊組 var moduleA = { state, mutations, actions }; //導出一個模塊 export default new Vuex.Store({ //2聲明模塊組 modules:{ a:moduleA } //3在App.vue中調用 })
2.在App.vue中
<template> <div id="app"> <div id="appaaa"> <h1>這是vuex的示例</h1> <p>{{$store.state.a.count}}</p> <p> <button @click = "addplus">+</button> <button @click = "subplus">-</button> </p> </p> </div> </div> </template> <script> //引入mapGetters import {mapActions} from 'vuex' export default { name:'app', methods:{ ...mapActions([ "addplus", "subplus" ]) } } </script> <style> </style>