2.11 Vuex高级用例
自我理解：...不知道想说啥
- 构建过程
在src中，mkdir store
在store中，mkdir modules touch index.js
在index.js中
import Vue from 'vue'
import Vuex from 'vuex'
import money from './modules/a'
import count from './modules/b'
Vue.use(Vuex)
export default new Vuex.store({
modules:{
money,
count
}
})
在modules中，touch a.js b.js
在a.js中,b.js类似
const state={
money:1
}
const mutations={
increment(state){
state.money++
},
decrement(state){
state.money--
}
}
const actions={
add:({commit})=>{
commit('add')
},
reduce({commit})=>{
commit('reduce')
}
}
export default{
namespaced:true,
state,
mutations,
actions
}
在App.vue中，在template script components中引入a.vue b.vue
在main.js中,需要特别注意
import store from './store/index'
必须设置交互才能够操作,不能直接写@click='add'
a.vue
script
import {mapActions} from 'vuex'
export default{
methods:mapActions('moeny',['add','reduce'])
}
这时才可以设置button的交互
特别注意的点，
在vuex中，mutations和actions中设置的方法名称，必须一致
传参
事件中设置a.vue
@click='add(2)
vuex中设置actionsand mutation中设置
const actions={
add:({commit},para)=>{
commit('add',para)
},
reduce:({commit})=>{
commit('reduce')
}
}
const mutations={
add(state,para){
state.money+=para
},
reduce(state)){
state.money--
}
}
