组件页面初始化时获取store中的数据
时间: 2023-08-14 14:06:04 浏览: 46
在组件页面初始化时获取store中的数据,可以通过以下步骤实现:
1. 在组件中引入store,例如:
```
import store from '@/store'
```
2. 在组件中使用computed属性来获取需要的store数据,例如:
```
computed: {
myData() {
return store.state.myModule.myData
}
}
```
这里假设store中有一个名为myModule的模块,其中包含一个名为myData的state。
3. 在组件的created生命周期钩子中,可以调用store中的action来获取数据,例如:
```
created() {
store.dispatch('myModule/fetchMyData')
}
```
这里假设store中有一个名为myModule的模块,其中包含一个名为fetchMyData的action,用于获取myData数据。
4. 如果需要在组件中监听store中数据的变化,可以使用Vuex的mapState和mapActions辅助函数,例如:
```
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState('myModule', {
myData: state => state.myData
})
},
methods: {
...mapActions('myModule', ['fetchMyData'])
},
created() {
this.fetchMyData()
}
}
```
这里使用了mapState和mapActions函数来简化代码,从而实现了更好的可读性和可维护性。