案例的目录结构如下图:
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: "<App></App>",
components:{
App: App
}
})*/
App.vue
<template>
<div>
<el-select v-model="selectedAddNum" placeholder="请选择">
<el-option
:key="1"
:label="1"
:value="1">
</el-option&