vuex常用設計套路

由於時間太晚了，我早已是睡眼朦朧，不多說了，直接上代碼。

大家都知道vuex的state、getters、mutations、actions吧，不知道的也沒關係，官網走一波。

先看整體目錄結構：

下面我們來看看每個文件中是怎麼操作的：

index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import * as getters from './getters'
import mutations from './mutations'
import * as actions from './actions'

Vue.use(Vuex)

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

state.js

const state = {
    user: {
        name: 'liuhua',
        age: 18
    }
}
export default state

getters.js

export const getUserInfo = state => state.user;

mutations.js

const mutations = {
    ChangeName(state, newName) {
        state.user.name = newName
    },
    ages(state,amount){
        state.user.age = amount
    }
}

export default mutations

actions.js

export const changeAge = function ({commit},newage){
    setTimeout(function(){
        console.log('延遲2s')
        commit('ages',newage)
    },1000)
}

至於mutations_type個人不喜歡用，僅此而已。如何項目夠大，建議用moudle區分模塊。此套路適合中小型項目。

就這樣，睡覺，不然會猝死的。。。