案例的目录结构如下图:
1、简单版Vuex
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const actions = {
jia(context, value){
context.commit('JIA', value)
}
}
const mutations = {
JIA(state, value){
state.sum += value
},
JIAN(state, value){
state.sum -= value
}
}
const state = {
sum: 0
}
const getters = {
bigSum(state){
return state.sum * 10
}
}
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'; //引入ElementUI组件库
import 'element-ui/lib/theme-chalk/index.css'; //引入ElementUI全部样式
import store from './store'
Vue.config.productionTip = false
Vue.use(ElementUI) //应用ElementUIWW
//按需引入ElementUI组件
// import { Row,Button,DatePicker,Table,TableColumn,Pagination,Loading } from 'element-ui';
// Vue.component(Row.name, Row);
// Vue.component(Button.name, Button);
// Vue.component(DatePicker.name, DatePicker);
// Vue.component(Table.name, Table);
// Vue.component(TableColumn.name, TableColumn);
// Vue.component(Pagination.name, Pagination);
// Vue.use(Loading.directive);
new Vue({
render: h => h(App),
store: store
}).$mount('#app')
/*
new Vue({
el: "#app",
template: " ",
components:{
App: App
}
})*/
App.vue
加
减
views/CalResult.vue
计算结果:{{sum}}
放大10倍后的结果:{{bigSum}}
效果如下图:
2、使用mapAction和mapMutations
App.vue
加
减
3、模块化
store/modules/caculate.js
export default {
namespaced: true,
actions:{
jia(context, value){
context.commit('JIA', value)
}
},
mutations:{
JIA(state, value){
state.sum += value
},
JIAN(state, value){
state.sum -= value
}
},
state:{
sum: 0
},
getters:{
bigSum(state){
return state.sum * 10
}
}
}
注意:namespaced: true这个配置必须加上,否则报错[vuex] module namespace not found in xxx
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import caculate from './modules/caculate'
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
caculate
}
})
main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'; //引入ElementUI组件库
import 'element-ui/lib/theme-chalk/index.css'; //引入ElementUI全部样式
import store from './store'
Vue.config.productionTip = false
Vue.use(ElementUI) //应用ElementUIWW
//按需引入ElementUI组件
// import { Row,Button,DatePicker,Table,TableColumn,Pagination,Loading } from 'element-ui';
// Vue.component(Row.name, Row);
// Vue.component(Button.name, Button);
// Vue.component(DatePicker.name, DatePicker);
// Vue.component(Table.name, Table);
// Vue.component(TableColumn.name, TableColumn);
// Vue.component(Pagination.name, Pagination);
// Vue.use(Loading.directive);
new Vue({
render: h => h(App),
store: store
}).$mount('#app')
/*
new Vue({
el: "#app",
template: " ",
components:{
App: App
}
})*/
App.vue
加
减
views/CalResult.vue
计算结果:{{sum}}
放大10倍后的结果:{{bigSum}}