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区分模块。此套路适合中小型项目。

就这样，睡觉，不然会猝死的。。。