《vue3+ts+element-plus 后台管理系统系列》之vuex4

}

}

3. 访问store Mutations和Actions

import { useStore } from ‘vuex’

export default {

setup () {

const store = useStore()

return {

// access a mutation

increment: () => store.commit(‘increment’),

// access an action

asyncIncrement: () => store.dispatch(‘asyncIncrement’)

}

}

}

vuex4.x 分包(js基础版)

---

---

代码地址：传送门

index.js

import { createStore, createLogger } from ‘vuex’

import cart from ‘./modules/cart’

import products from ‘./modules/products’

const debug = process.env.NODE_ENV !== ‘production’

export default createStore({

modules: {

cart,

products

},

strict: debug,

plugins: debug ? [createLogger()] : []

})

模块

import shop from ‘…/…/api/shop’

// initial state

const state = {

all: []

}

// getters

const getters = {}

// actions

const actions = {

getAllProducts ({ commit }) {

shop.getProducts(products => {

commit(‘setProducts’, products)

})

}

}

// mutations

const mutations = {

setProducts (state, products) {

state.all = products

},

decrementProductInventory (state, { id }) {

const product = state.all.find(product => product.id === id)

product.inventory–

}

}

export default {