vue2获取vuex模块数据
时间: 2024-12-02 15:22:17 浏览: 19
在Vue.js 2.x中,如果你想从Vuex store中获取模块(module)的数据,你需要按照以下步骤操作:
1. 首先,在你的Vuex store文件中创建或访问所需的模块。例如,假设你有一个名为`users`的模块:
```javascript
import { state, mutations } from './modules/users'
export default new Vuex.Store({
modules: {
users,
},
})
```
在这个例子中,`state`是一个对象,包含了模块的状态数据,而`mutations`则是用于更新状态的方法。
2. 在你的组件里,通过`mapState`辅助函数来映射你想使用的状态到组件的计算属性上:
```vue
<template>
<div>
{{ user.name }}
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['users', 'user']),
}
}
</script>
```
这里`['users', 'user']`表示我们要取`users`模块下的整个用户状态(通常是对象),然后取其中名为`user`的部分。
3. 如果需要触发状态更改,你可以使用`mapActions`或`mapMutations`辅助函数来调用对应的action或mutation:
```vue
<template>
<button @click="fetchUser">
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: {
fetchUser: {
...mapActions(['fetchUser']),
}
}
}
</script>
```
`fetchUser`会调用store中的`fetchUser` action。
阅读全文