主要介绍了Vuex modules 模式下 mapState/mapMutations 的操作实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在 Vuex 框架中，`mapState` 和 `mapMutations` 是两个非常重要的辅助函数，它们使得组件能够方便地绑定到 Vuex store 中的状态和 mutations。在大型应用中，通常会采用 modules 模式来组织 store，以便更好地管理状态。下面我们将详细探讨在 Vuex modules 模式下如何使用 `mapState` 和 `mapMutations`。
让我们看看如何在模块化（modules）的 Vuex store 中设置状态和 mutations。在 `store/index.js` 文件中，我们导入了 `user` 和 `order` 两个模块，并将它们添加到 `modules` 对象中。每个模块都包含 `state`, `mutations`, `actions`, 和 `getters` 四个部分，分别用于定义状态、改变状态的方法、异步操作和计算属性。
例如，`store/user.js` 定义了用户相关的状态和 mutations：
```javascript
const state = {
name: "sqrtcat",
age: 25
}
const mutations = {
setUserName(state, name) {
state.name = name
},
setUserAge(state, age) {
state.age = age
}
}
```
同样，`store/order.js` 定义了订单相关的状态和 mutations：
```javascript
const state = {
name: "cart",
count: 0
}
const mutations = {
setOrderName(state, name) {
state.name = name
},
setOrderCount(state, count) {
state.count = count
}
}
```
在组件中，我们可以使用 `mapState` 和 `mapMutations` 辅助函数来绑定状态和 mutations。例如，在 `index.vue` 中，我们注入了整个 store 到 Vue 实例，并通过 `mapState` 和 `mapMutations` 访问和修改状态：
```javascript
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['hasLogin', 'token', 'userName', 'userAge']),
},
methods: {
...mapMutations(['setUserName', 'setUserAge', 'setOrderName', 'setHasLogin', 'setToken']),
},
// ...
}
```
在这里，`mapState` 用于将 `store/user` 和 `store/order` 中的状态值映射到组件的计算属性，而 `mapMutations` 用于将 mutations 映射到组件的 methods。这样，我们就可以在模板中直接使用这些计算属性和方法，如：
```html
<view>{{ userName }}</view>
<button @click="setUserName('big_cat')">setUserName</button>
```
这使得组件与 Vuex store 的交互变得更加简洁和直观。
Vuex modules 模式允许我们把状态管理划分为多个模块，每个模块有自己的状态、mutations、actions 和 getters。通过 `mapState` 和 `mapMutations`，我们可以轻松地在组件内绑定这些模块的状态和 mutations，提高了代码的可读性和可维护性。在实际项目中，这种组织方式有助于管理复杂的状态逻辑，保持代码结构清晰，便于团队协作。
- 1
- 2
前往页