vuex管理全域性變數、全域性方法

摘要： 曾幾何時，我採用vue2框架寫了關於世界盃競猜主題的專案，裡面有多個檢視依賴於同一狀態，然後來自不同檢視的行為需要變更同一狀態。 想想以前稍簡單的多層元件巢狀採用父子傳值的方式搞得我已經夠難受（現在回憶起來氣都不順），現在如果還採用這種方式，可能連我都看不懂自己寫的程式碼...

曾幾何時，我採用vue2框架寫了關於世界盃競猜主題的專案，裡面有多個檢視依賴於同一狀態，然後來自不同檢視的行為需要變更同一狀態。

想想以前稍簡單的多層元件巢狀採用父子傳值的方式搞得我已經夠難受（現在回憶起來氣都不順），現在如果還採用這種方式，可能連我都看不懂自己寫的程式碼了，連自己都不知道怎麼維護了！很慶幸，有一種狀態管理架構叫vuex,很慶幸，他能很好的解決我遇到的問題......

vuex是一個專門為vue.js設計的集中式狀態管理架構，用來管理公用屬性，真的是好用太多了！！！

那就開始吧!

1、利用npm包管理工具，進行安裝 vuex（前提是已經用Vue腳手架工具構建好專案，可參考ofollow,noindex">https://www.jianshu.com/p/023b7492833d ）

npm install vuex --save

2、新建一個store.js用於存放公共的屬性

在store.js中引用Vuex

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)

3、在main.js中引用新建的store.js,並在例項化 Vue物件時加入 store 物件

import store from './store'

new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})

配置好這些關聯檔案之後，我們可以開始狀態管理了~

下面是store.js狀態管理示例：

const store = new Vuex.Store({
state: { //唯一資料來源，我理解為宣告全域性變數
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
],
count:1
},
getters: {//針對state資料的過濾，
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
},
mutations: { //邏輯處理，但Mutation 必須是同步函式
increment (state) {
// 變更狀態
state.count++
}
}，
actions: {//Action 類似於 mutation,Action 提交的是 mutation，而不是直接變更狀態;Action 可以包含任意非同步操作.
setIncrement (context) {
context.commit('increment')
}
}
})

const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

更多更詳細的，那就去看看文件吧https://vuex.vuejs.org/zh/