簡易的vuex用法，簡易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?作為第二個參數（可選）。愛掏網 - it200.com
• actions:?在 store 上注冊 action。愛掏網 - it200.com處理函數總是接受?context?作為第一個參數，payload?作為第二個參數（可選）。愛掏網 - it200.com
• getters:?Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。愛掏網 - it200.com就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。愛掏網 - it200.com
• modules:?包含了子模塊的對象，會被合并到 store。愛掏網 - it200.com
• plugins:?一個數組，包含應用在 store 上的插件方法。愛掏網 - it200.com
• strict:?使 Vuex store 進入嚴格模式，在嚴格模式下，任何 mutation 處理函數以外修改 Vuex state 都會拋出錯誤。愛掏網 - it200.com

? 我們今天只用到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方法。愛掏網 - it200.comactions里面可以執行異步操作。愛掏網 - it200.com

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

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

最后將生成的實例導進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的功能已經可以用了，如果業務需要，可以慢慢將它們的選項都完善進去

每一次的記錄，都是向前邁進的一步