vuex action如何使用获取
时间: 2023-10-18 09:43:43 浏览: 57
要使用 Vuex 中的 Action 来获取数据,你需要按照以下步骤进行操作:
1. 在你的 Vuex store 的 actions 对象中定义一个 action 方法。例如,假设你想要获取用户信息,可以创建一个名为 `getUserInfo` 的 action 方法。
```javascript
// store.js
const store = new Vuex.Store({
state: {
userInfo: null
},
mutations: {
setUserInfo(state, userInfo) {
state.userInfo = userInfo;
}
},
actions: {
async getUserInfo({ commit }) {
const response = await fetch('https://api.example.com/user');
const data = await response.json();
commit('setUserInfo', data);
}
}
});
```
2. 在你的组件中,通过使用 `mapActions` 辅助函数将 action 映射到组件的方法中。确保你已经导入了 `mapActions` 函数。
```javascript
// YourComponent.vue
import { mapActions } from 'vuex';
export default {
// ...
methods: {
...mapActions(['getUserInfo'])
},
// ...
};
```
3. 现在你可以在组件中调用 `getUserInfo` 方法来触发 action,并且该 action 将会获取数据并将其提交给对应的 mutation。
```javascript
// YourComponent.vue
export default {
// ...
methods: {
async fetchData() {
await this.getUserInfo();
// 在这里可以访问已经获取到的用户信息
console.log(this.$store.state.userInfo);
}
},
// ...
};
```
这样,当你调用 `fetchData` 方法时,它将触发 `getUserInfo` action,该 action 将获取数据并将其提交给 `setUserInfo` mutation。然后,你就可以在组件中访问已经获取到的用户信息了。