示例代码
main.js中添加代码
import store from "./store" //导入store
new Vue({
el: '#app',
router,
store, //添加一个store
components: {App},
template: '<App/>'
})
store文件夹中创建index.js
分为四级操作: state; mutations; action; getters
import Vue from "vue"
import VueX from "vuex"
Vue.use(VueX)
export default new VueX.Store({
state: {
order: {counter: 1, downmenu: 1, radios: 1, },
totalPrice: 0,
},
mutations: {
updateOrder(state, data) { //data = key , value
if (data.counter != undefined) {state.order.counter = data.counter; }
if (data.downmenu != undefined) {state.order.downmenu = data.downmenu; }
if (data.radios != undefined) {state.order.radios = data.radios; }
},
updatePrice(state, price) {state.totalPrice = price; }
},
actions: {
updateOrder(context, data) {context.commit("updateOrder", data); },
updatePrice(context, price) {context.commit("updatePrice", price); }
},
getters: {
getOrder(state) {return state.order ? state.order : {}},
getTotalPrice(state) {return state.totalPrice >= 0 ? "￥" + state.totalPrice : 0}
}
})
设置传值
this.$store.dispatch("updateOrder", {"counter": this.number});
获取store值
this.$store.getters.getTotalPrice;