vuex 的使用詳解大全

引言：

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({
    //namespaced: false, //不開通命名空間，須要層級訪問 info: state => state.index.info

 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查看狀態值