vuex state中咋样映射
时间: 2023-08-20 10:10:50 浏览: 44
在 Vue 组件中映射 Vuex 的状态属性,你可以使用 Vuex 提供的辅助函数 `mapState`。这个函数可以帮助你在组件中快速访问和使用 Vuex store 中的状态属性。
首先,确保已经正确地安装了 Vuex,并在根组件中创建了 Vuex store。然后,在需要映射状态属性的组件中,可以通过以下方式进行映射:
```javascript
import { mapState } from 'vuex';
export default {
// ...
computed: {
...mapState(['isShowLoginModal']),
// ...
},
// ...
};
```
在上面的代码中,我们使用了 `mapState` 函数来将 `isShowLoginModal` 属性映射到组件的计算属性中。现在,你可以在组件中直接使用 `this.isShowLoginModal` 来访问该属性,而不需要通过 `$store.state.isShowLoginModal` 的方式。
如果你想给映射的状态属性起一个不同的名称,可以使用对象语法:
```javascript
computed: {
...mapState({
loginModalVisible: 'isShowLoginModal',
// ...
}),
// ...
},
```
上面的代码将 `isShowLoginModal` 属性映射为组件中的 `loginModalVisible` 计算属性。
通过使用 `mapState` 函数,可以简化组件代码,并提高对 Vuex store 状态属性的访问和使用的便捷性。