第一步：在store文件夾下的index.js入口文件寫入：
import Vue from 'vue';
import Vuex from 'vuex';
import feeds from './feeds/index'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
feeds
}
})
第二步：在每個模塊內的index文件這組裝所有的零件，並且輸出
export default {
namespaced: true,//必須加它不然報錯
state:{
number:1
},
mutations: {
add(state,playload) {
state.number +=playload;
}
},
actions:{
addAction(context){
context.commit('add',10);
}
}
}
注意上面多出的一行，我們在組件里怎么區分不同模塊呢？namespaced寫成true，意思就是可以用這個module名作為區分了（也就是module所在的文件夾名）
最好使用store 將其放進main.js中，代碼如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
這樣就可以使用moudules中的state,mutations,actions,代碼如下：
import { mapState,mapActions,mapMutations } from 'vuex'
export default {
name: 'home',
computed: {
...mapState('feeds',{
number: state =>state.number
})
},
methods: { //模塊名必須寫清楚
...mapActions('feeds',[ //
'addAction'
]),
...mapMutations('feeds',[
'add',
]),
}
}
html代碼如下：
<template>
<div class="home">
{{this.$store.state.feeds.number}}
<br/>
{{number}}
//調用mutations的方法
<button @click="add(1)">加</button>
<br/>
<br/> //調用調用actions的方法
<button @click="addAction">action加</button>
</div>
</template>
另外我們也可以通過this.$store來獲取modules中的state比變量和mutations和actions的方法
代碼如下：
<template>
<div class="about">
<h1></h1>
{{this.$store.state.feeds.number}}
<br>
<!--調用mutations的方法-->
<button @click="add">mutations加</button>
<br>
<br> <!--調用actions的方法-->
<button @click="addaction">actions加</button>
</div>
</template>
<script>
import { mapState,mapActions,mapMutations } from 'vuex'
export default {
name: 'home',
methods: {
add() {
this.$store.commit('feeds/add',10)
},
addaction() {
this.$store.dispatch('feeds/addAction') ;
}
}
}
</script>
