1.首先引入vuex
1.1 npm下载vuex模块
npm install vuex --save
1.2 在main.js引入
import Vuex from "vuex" //全局引入vuex
import store from './vuex/store'//引入store
1.3 在store.js 引入
import Vue from 'vue'
import Vuex from 'vuex'
1.3.1接着实例化一个仓库
export default new Vuex.Store({
//用来存储一些变量
state:{
},
//管理异步操作
actions:{
}
//如同vue单页面组件中的methods,自定义的方法
mutations:{
addcount(state, data) {
state.CartList.forEach((item) => {
if (item.id== data){
item.count++
}
});
},
minuscount(state, data) {
state.CartList.forEach((item) => {
if (item.id == data) {
item.count--
if (item.count <= 1) {
item.count = 1
}
}
});
},
//如同组件中 计算属性 和vue中filter,调用方法返回一个值
getters: {
totalmoney(state) {
let shop = {
count: 0,
totalprice: 0
}
state.CartList.forEach(item => {
if (item.checked) {
shop.count += item.count //footer下的角标
/**
* @param totalmoney
* 计算购物车总价
*/
shop.totalprice += item.price * item.count
}
})
return shop
},
}
})
2.页面调用vuex的方法
调用mutations的方法并传参
addcount(idx){
this.$store.commit("addcount",idx)
},
minuscount(idx){
this.$store.commit("minuscount",idx)
},
调用getters的方法并取计算后的值
基本就是vuex最简单的应用了…