簡易的vuex用法

vuex是vue中用於管理全局狀態的一個組件，用於不同組件之間的通信，下面將介紹它的簡單用法

首先安裝vue與vuex

npm install vue
npm install vuex --save

然后創建一個單獨的文件store.vue用來對vuex的處理和使用

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

vuex有以下幾種選項

• state: Vuex store 實例的根 state 對象
• mutations: 在 store 上注冊 mutation，處理函數總是接受 state 作為第一個參數（如果定義在模塊中，則為模塊的局部狀態），payload 作為第二個參數（可選）。
• actions: 在 store 上注冊 action。處理函數總是接受 context 作為第一個參數，payload 作為第二個參數（可選）。
• getters: Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。
• modules: 包含了子模塊的對象，會被合並到 store。
• plugins: 一個數組，包含應用在 store 上的插件方法。
• strict: 使 Vuex store 進入嚴格模式，在嚴格模式下，任何 mutation 處理函數以外修改 Vuex state 都會拋出錯誤。

 

我們今天只用到state，mutations，actions，getters

const state = {
    token: '' // 定義state的初始值，組建中我們可以用$store.state.token來調用
}

const mutations = {
　　setToken (state, token) {
　　　　state.token = token || ''
　　}
}

我們可以用$store.commit('setToken', 'xxxxxx')來改變state中token的值

const actions = {
　　setToken (context) {//這里的context和我們使用的$store擁有相同的對象和方法
　　　　context.commit('setToken');
　　　　//你還可以在這里觸發其他的mutations方法
　　},
}

可以使用 $store.dispatch('setToken') 來觸發 action 中的 setToken方法。actions里面可以執行異步操作。

getters: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
    }
  }

getters類似於vue的計算屬性，它的作用是用來派生一些新的狀態，比如我們要把state狀態的數據進行一次映射后者篩選，並把這個狀態返回給組件使用。

最后將生成的實例導進main.js

export default new Vuex.Store({
  state,
  mutations,
  actions，
  getters 
})

main.js

import store from './store'
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

這樣vuex的功能已經可以用了，如果業務需要，可以慢慢將它們的選項都完善進去