基本使用
- 初始化数据、配置
actions
、配置mutations
、操作文件store.js
// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex``````
improt Vuex from 'vuex'
// 引用Vuex
Vue.use(Vuex)
const actions = {
// 响应组件中的动作
jia(context, value) {
......
context.commit('JIA', value)
}
}
const mutations = {
// 操作数据
JIA(state, value) {
state.sum += value
}
}
// 初始化数据
const state = {
sum: 0
}
export default new Vuex.Store({
actions,
mutations,
state
})
- 组件中读取vuex中的数据
this.$store.state.xxx
- 组件中修改vuex中的数据
this.$store.dispatch('action中的方法名', 数据)
或 this.$store.commit('mutations中的方法名', 数据)
- 总结:可以把actions想做一个服务员,mutations想做一个厨师,state想做是一些菜
- 若没有网络请求或其他业务逻辑,组件也可以越过actions,即不写
dispatch
, 直接编写 commit