引言：

vue的vuex是一個全域性狀態管理工具，有強大的社群所貢獻，方便達到一端改變全域性改變功能，這裡就不強調如何使用了，單獨講解一下如何更好的使用這個工具。

先說一下這個使用的場景，如果僅是父子元件傳值這個大可不必使用，當你用本地儲存和廣播事件都不能滿足你的需求時，你就可以考慮使用vuex來管理你的資料了。

使用方法：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let state = { //vuex的狀態物件
user_info:{},
info:'',
name:''
}
let mutations = { //事件處理器驅動state狀態值變化的
changeInfo:state => (state.info ='警告')
saveUser(state,payload) {
    ​state.user_info=  payload ?payload: '{}' 
}
changeName:(state,payload)=>{
state.name = payload.name
}
}
let actions = { //可以給元件使用的函式，這裡可以加請求的方法或處理資料，以此來更好的驅動狀態變化
    ​save({ commit, state }, payload){
      .....
     commit('openDrawerBox', payload)//必須使用commit來驅動
​  }
}
export default new Vuex.Store({
 state，
 mutations,
 actions
})

　　將此頁面的資料註冊到根檔案即可使用了

import store from './store' // 引入store物件 上述程式碼所在的頁面
// 例項化一個vue元件
new Vue({
 el: '#app',
 router,
 store, // 注入到跟例項中
 template: '<App/>',
 components: { App }
})

　　程式碼解釋：vuex的規定狀態只能有mutations中的方法來修改，而派發mutations的方法須有action來觸發。基本元件的檢視的來呼叫action的方法在

這一層可以處理資料或與後臺互動然後將最終的資料使用commit派發給mutations來改變指定的store中的state值，這就是官網給的生命週期圖的解釋。

元件頁面呼叫方法一：

import { mapState, mapMutations } from 'vuex'
computed: {//在計算週期方法內引入
       ...mapState( ['user_info','name','info'])
//這樣即可在本頁面當做data方法內資料使用了，this.name
   },
methods: {
    ...mapMutations(['changeInfo','saveUser','changeName'])//註冊方法呼叫,這樣就可以在本元件中直接呼叫了
this.changeName('修改名稱')
}

　　元件呼叫方法二：

import { mapState } from 'vuex'
computed: {
   // 引用的複雜寫法；
   ...mapState({
     name: state => state.name
   })
 },
//直接在的某方法內觸發actions的方法；
methods(){
this.$store.dispatch('save','修改名稱')
this.$store.commit({type:'saveUser'，name:'修改名稱'})//直接呼叫
}

　　vuex的全域性狀態都儲存在$store的全域性物件上可以列印$store.state檢視狀態值