一.安裝依賴
npm install vuex --save
或者
cnpm install vuex --save
二.引入
為了便于維護。在vue項目中的src目錄下建立目錄store,
在改store目錄下建立index.js檔案和一個modules目錄
index.js檔案如下
import Vue from "vue"
import Vuex from "vuex"
import account from "./modules/account"
import setting from "./modules/setting"
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
account,
setting
}
})
modules目錄下有兩個檔案分别是account.js和setting.js
在account.js檔案下
export default {
namespaced: true,
state: {
user: {}
},
actions: {
setuser (ctx, user) {
ctx.commit("setuser", user);
}
},
mutations: {
setuser(state, user) {
state.user = user;
}
}
}
另一檔案一樣的格式
最後在main.js檔案引入我們寫好的src/store/index/js檔案
import store from "./store"
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
ro
三.使用
用了這種分子產品的方式寫store,在使用store的資料的時候就能寫成
this.$store.state.user
這種格式了
我們要寫成如下的這種格式
this.$store.account.state.user
就是到倉庫中先尋找到account子產品,然後再在子產品中的state。。
并且在dispatch的時候如下
this.$store.dispatch('account/setuser', user)
不能寫成下面的形式
this.$store.dispatch('setuser', user)
都是需要先找到對應的子產品才行