上面模块化vuex后
时间: 2023-06-30 13:03:44 浏览: 47
模块化 Vuex 可以将 store 分割成多个模块,每个模块拥有自己的 state、mutations、actions、getters 等,便于管理和维护。下面是一个简单的示例:
```js
// store/modules/user.js
const state = {
userInfo: null
}
const mutations = {
setUserInfo(state, userInfo) {
state.userInfo = userInfo
}
}
const actions = {
async fetchUserInfo({ commit }, userId) {
const res = await fetch(`/api/user/${userId}`)
const userInfo = await res.json()
commit('setUserInfo', userInfo)
}
}
const getters = {
isLoggedIn: state => !!state.userInfo
}
export default {
namespaced: true,
state,
mutations,
actions,
getters
}
```
```js
// store/modules/cart.js
const state = {
items: []
}
const mutations = {
addItem(state, item) {
state.items.push(item)
},
removeItem(state, itemId) {
state.items = state.items.filter(item => item.id !== itemId)
}
}
const actions = {
async addToCart({ commit }, item) {
// 添加到购物车的异步操作
commit('addItem', item)
},
async removeFromCart({ commit }, itemId) {
// 从购物车中移除的异步操作
commit('removeItem', itemId)
}
}
const getters = {
cartTotal: state => state.items.reduce((total, item) => total + item.price, 0)
}
export default {
namespaced: true,
state,
mutations,
actions,
getters
}
```
```js
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import userModule from './modules/user'
import cartModule from './modules/cart'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
user: userModule,
cart: cartModule
}
})
```
在组件中使用模块化的 store:
```html
<template>
<div>
<h2>User Info</h2>
<p v-if="user">{{ user.name }}</p>
<button @click="fetchUserInfo">Fetch User Info</button>
<h2>Shopping Cart</h2>
<ul>
<li v-for="item in cartItems" :key="item.id">
{{ item.name }} - {{ item.price }}
<button @click="removeFromCart(item.id)">Remove</button>
</li>
</ul>
<p>Total: {{ cartTotal }}</p>
<button @click="addToCart({ id: 1, name: 'Product A', price: 10 })">Add to Cart</button>
</div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
computed: {
...mapState('user', {
user: state => state.userInfo
}),
...mapState('cart', ['items']),
...mapGetters('cart', ['cartTotal'])
},
methods: {
...mapActions('user', ['fetchUserInfo']),
...mapActions('cart', ['addToCart', 'removeFromCart'])
}
}
</script>
```