1.引入一个安装好的vuex
2.注册vuex
3.实例化
4.定义核心
state 数据
mutation 方法
actions 异步方法
getters 对已有数据加工形成新数据,store中数据变化,getter中的数据也会变化
5.挂载store到vue
6.在需要的组件中使用vuex
import Vue from 'vue'
import Vuex, {
Store } from 'vuex'
Vue.use(Vuex)
export default new Store({
state: {
count: 1,
cart: JSON.parse(localStorage.getItem('cart') || '[]')
},
mutations: {
addCart (state, goodsinfo) {
let flag = false
state.cart.some(item => {
if (item.id === goodsinfo.id) {
item.count += goodsinfo.count
flag = true
}
})
if (!flag) {
state.cart.push(goodsinfo)
}
localStorage.setItem('cart', JSON.stringify(state.cart))
}
},
actions: {
addCart2 ({
commit }, goodsinfo) {
commit('addCart', goodsinfo)
}
},
getters: {
getAllCount (state) {
let c = 0
state.cart.some(item => {
c += item.count
})
return c
},
getAllPrice (state) {
let allPrice = 0
state.cart.some(item => {
if (item.selected === true) {
allPrice += item.count * item.sell_price
}
})
return allPrice * 100
}
}
})
访问核心状态
1.state
this.$store.state.count
import {
mapState} from 'vuex'
computed:
{
...mapState(['count'])}
2.mutation
this.$store.commit("addCart ")
import {
mapMutations} from 'vuex'
methods:
{
...mapMutations(['addCart '])}
3.actions
this.$store.dispatch("addCart2")
import {
mapActions} from 'vuex'
methods:
{
...mapActions(['addCart2'])}
4.getter
this.$store.getters.名字
import {
mapGetters} from 'vuex'
computed:
{
...mapGetters(['getAllCount'])}