87 lines
2.0 KiB
JavaScript
87 lines
2.0 KiB
JavaScript
|
export default {
|
|||
|
|
state:{//存放状态
|
|||
|
|
token:'token已生成',
|
|||
|
|
userInfo:{},
|
|||
|
|
count:0,
|
|||
|
|
publicColor:'',
|
|||
|
|
todos: [{
|
|||
|
|
id: 1,
|
|||
|
|
text: '我是内容一',
|
|||
|
|
done: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
text: '我是内容二',
|
|||
|
|
done: false
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
obj:{
|
|||
|
|
a:'吃鸡腿',
|
|||
|
|
b:'吃自助餐'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// Vuex中store数据改变的唯一方法就是mutations 不适合异步方法
|
|||
|
|
mutations: {
|
|||
|
|
add(state) {
|
|||
|
|
state.count = 7;
|
|||
|
|
},
|
|||
|
|
add2(state, payload) {
|
|||
|
|
state.count = payload.amount;
|
|||
|
|
},
|
|||
|
|
// 单个属性处理方法
|
|||
|
|
setToken(state,str) {
|
|||
|
|
state.token = str;
|
|||
|
|
},
|
|||
|
|
// 对象处理方法
|
|||
|
|
updateUserInfo(state, payload) {
|
|||
|
|
// 变更状态
|
|||
|
|
state.userInfo = payload.userInfo;
|
|||
|
|
},
|
|||
|
|
// 新增字段方法
|
|||
|
|
newProp(state,payload) {
|
|||
|
|
state.obj = { ...state.obj, c: payload.c };
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 可以执行任意的同步和异步操作
|
|||
|
|
actions:{
|
|||
|
|
addCountAction ({commit}) {
|
|||
|
|
commit('add')
|
|||
|
|
},
|
|||
|
|
addCountAction2 (context , payload) {
|
|||
|
|
context.commit('add2', payload)
|
|||
|
|
},
|
|||
|
|
// 异步方法
|
|||
|
|
addCountAction3 (context , payload) {
|
|||
|
|
setTimeout(function () {
|
|||
|
|
context.commit('add2', payload)
|
|||
|
|
}, 2000)
|
|||
|
|
},
|
|||
|
|
actionA ({ commit }) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
commit('someMutation')
|
|||
|
|
resolve()
|
|||
|
|
}, 1000)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
actionB ({ dispatch, commit }) {
|
|||
|
|
return dispatch('actionA').then(() => {
|
|||
|
|
commit('someOtherMutation')
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），对 state 的加工，是派生出来的数据。 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。
|
|||
|
|
getters: {
|
|||
|
|
doneTodos: state => {
|
|||
|
|
return state.todos.filter(todo => todo.done)
|
|||
|
|
},
|
|||
|
|
doneTodosCount: (state, getters) => {
|
|||
|
|
//state ：可以访问数据
|
|||
|
|
//getters：访问其他函数，等同于 store.getters
|
|||
|
|
return getters.doneTodos.length
|
|||
|
|
},
|
|||
|
|
getTodoById: (state) => (id) => {
|
|||
|
|
return state.todos.find(todo => todo.id === id)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|