配置vuex並使用

配置vuex並使用

1. 安裝vuex: npm install --save-dev vuex
2. 在src目錄下建立store文件夾
3. store文件夾下文件 index.js,state.js,getters.js,mutations.js,actions.js

index.js文件中須要引入vue 和 vuex,這個文件是主要的vue文件配置

import Vue from 'vue';
import Vuex from 'vuex';
import state from './state.js';
import getters from './getters.js';
import mutations from './mutations.js';
import actions from './acions.js';

Vue.use(Vuex);
const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
}) 

export default store;

4 在src文件夾下的入口js文件main.js中引入輸出的store

import store from './store/index.js'

並在Vue對象中加入store的配置

new Vue({
  el: '#app',
  router,
  store,//加入sotre的配置
  render: h => h(App)
})

5 解釋：
在state.js中設置狀態值tagMessage;
在constants.js中設置狀態值的常量；
在mutations.js中設置函數來爲狀態值的常量賦值，從而改變狀態值，可是此時state的狀態值尚未改變；
acions設置函數，使用commit來提交mutations中狀態值的改變，可是此時state的狀態值仍是沒有改變，須要經過$dispatch來分配actions；
getters.js中返回了狀態值，在vue文件中經過引入mapGetters使用this來調用此state的狀態值；
能夠在vue文件中經過this.$store.dispatch來分配actions，從而完成state的commit提交，進一步進行狀態值state的改變。