vue中簡單版vuex的兩種使用方式

方式一 | 普通方式

1-1. store下創建index.js文件

1-2. index.js內構建store內容

import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

// 設置只有在開發環境的時候纔打印日誌
const debug = process.env.NODE_ENV !== 'production'

const state = {
    barIndex: '1'
}
const getters = {
    barIndex: state => state.barIndex
}
const mutations = {
   CHANGE_INDEX (state, value) {
       state.barIndex = value
   }
}
const actions = {
    doSomething({commit},data){
    commit('CHANGE_INDEX',data)
  },
}
const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    strict: debug,
    plugins: debug ? [createLogger()] : []
})
export default store
複製代碼

方式二 | 模塊化

2-1. 目錄結構

2-2. 狀態內容

2-2-1. index

初始化store，指定vuex不一樣狀態對應的文件

import Vue from "vue";
import Vuex from "vuex";
import * as actions from "./actions";
import * as getters from "./getters";
import state from "./state";
import mutations from "./mutations";
import createLogger from "vuex/dist/logger"; // 打印日誌

Vue.use(Vuex);

// 設置只有在開發環境的時候纔打印日誌
const debug = process.env.NODE_ENV !== "production";

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
});
複製代碼

2-2-2. state

官網解釋

能夠理解爲vuex存儲的數據地方，是一個數據存儲中心

const state = {
  status: "",
};

export default state;
複製代碼

2-2-3. getters

官網解釋

能夠理解爲更方便的調用state裏面的屬性

export const status = state => state.status;
複製代碼

通常使用輔助函數mapGetters來獲取state裏面定義的數據，能夠經過this.status直接使用

computed: {
    // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      'status',
      // ...
    ])
  }
複製代碼

2-2-4. mutation-types

官網解釋

能夠理解爲方便後期維護和多人合做，定義了以後用在mutations中

export const SET_STATUS = "SET_STATUS";
複製代碼

2-2-5. mutations

官網解釋

能夠理解爲，在mutations狀態中，去同步操做state裏面定義的屬性

import * as types from "./mutation-types";

// payload就是經過mapMutations函數傳過來的數據number1
const mutations = {
  [types.SET_STATUS](state, payload) {
    state.status = payload;
  }
};

export default mutations;
複製代碼

通常使用輔助函數mapMutations來使用

methods: {
    // 引入
    ...mapMutations({
      set_status: 'SET_STATUS'
    }),
    // 使用
    this.set_status('number1')
}
複製代碼

2-2-5. actions

官網解釋

也就是說，actions裏面執行的是異步操做，執行完後，再把數據經過mutations同步到state的數據中

import * as types from "./mutation-types";

export const actionsSetdataInfo = ({ commit }, data) => {
// 這裏能夠調用接口，當數據返回後，再經過commit把數據同步到mutations裏面
  commit(types.SET_STATUS, data);
};
複製代碼