二十六、Vuex异步获取数据的步骤
Vuex封装使用
import { getInfo } from "../../api/user" //axios二次封装接口的导入 import { getToken } from '@/utils/auth' //获取token //vuex的基本数据,state用来存储变量 const state = { Infor: "", token: getToken(), }; //异步操作数据 (action异步操作数据的地方) const actions = { //getpersonal组件呐请求数据名 async getpersonal ({ commit }) { let result = await getInfo(state.token); console.log(result) if (result.code == 200) { commit('GETPERSONAL', result.data[0]) } } }; //处理数据 mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。 //每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 const mutations = { PERSONALINfOR (state, data) { state.Infor = data } }; //相当于计算属性 const getters = {}; export default { state, mutations, actions, getters }
调用Vuex封装的函数
mounted() { this.$store.dispatch("getpersonal"); },
使用Vuex的值 (Vuex模块化 其中一个模块personalData)
computed: { personalIfor: function () { return this.$store.state.personalData.Infor; //模块化访问方式 },