由于时间太晚了,我早已是睡眼朦胧,不多说了,直接上代码。
大家都知道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区分模块。此套路适合中小型项目。
就这样,睡觉,不然会猝死的。。。
版权声明:本文为liuhua_2323原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。