映射状态和计算属性是什么意思
时间: 2023-08-10 10:01:43 浏览: 45
在 Vue.js 中,映射状态(Mapping State)和映射计算属性(Mapping Getters)是通过 Vuex 提供的辅助函数来简化组件与全局状态(state)和计算属性(getters)之间的关联。
- 映射状态(Mapping State):通过 `mapState` 辅助函数,你可以将 Vuex 中的状态直接映射到组件的计算属性中。它接收两个参数:命名空间和一个映射对象。映射对象的键是组件中的计算属性名称,值是 Vuex 中的状态名称。这样,你可以在组件中使用计算属性访问和使用 Vuex 中的状态。
```javascript
import { mapState } from 'vuex';
export default {
computed: {
...mapState('user', {
token: state => state.token
})
}
}
```
- 映射计算属性(Mapping Getters):通过 `mapGetters` 辅助函数,你可以将 Vuex 中的计算属性直接映射到组件的计算属性中。它也接收两个参数:命名空间和一个映射对象。映射对象的键是组件中的计算属性名称,值是 Vuex 中的计算属性名称。这样,你可以在组件中使用计算属性来获取 Vuex 中计算得到的值。
```javascript
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters('user', {
userInfo: 'get_userInfo'
})
}
}
```
通过使用这些辅助函数,你不需要在组件中直接访问 Vuex 的模块和计算属性,而是可以通过映射的计算属性来访问和使用它们,使代码更简洁和可维护。