向vuex存储数据和获取数据-和直接调用actions.js中的异步方法
向vuex的变量存储数据 1.在state.js中添加 userInfo: {}, 2.actions.js中添加同步用户信息-将参数userInfo传递给USER_INFO 创建一个方法-不用异步方法 syncUserInfo({commit}, userInfo){ commit(USER_INFO, {userInfo}); }, 3.创建一个中间变量mutation-types.js export const USER_INFO = 'user_info'; 4.在actions.js中引入变量-USER_INFO import { USER_INFO } from './mutation-types' 5.在mutations.js中引入变量 import { USER_INFO } from './mutation-types' 将userInfo赋值给state [USER_INFO](state, {userInfo}) { state.userInfo = userInfo; }, 6.外界直接调用actions.js中的方法 syncUserInfo import {mapActions} from 'vuex' methods: { // 存到vuex-是个方法。需要...延展符展开 ...mapActions(['syncUserInfo']), } ------------------ 向vuex中获取数据 1.引入 import {mapState} from 'vuex'; 2.计算属性 computed:{ ...mapState(['userInfo']) },
------------------------------------------
直接调用vuex-中 actions.js的异步方法--
this.$store.dispatch
created(){ // 调用vuex-actions中的方法-刚进入app,就需要验证登录的时效性 this.$store.dispatch('getUserInfo') },
actions.js
// 7. 异步获取用户信息 async getUserInfo({commit}){ const result = await getUserInfo(); // actions中调用getUserInfo方法---需要引入import console.log(result); if(result.success_code === 200){ commit(USER_INFO, {userInfo: result.message}); } },
actions中调用getUserInfo方法---需要引入
import {
getUserInfo,
} from '../api'
----------------------
api-index.js
// 2.9 获取登录的用户信息
export const getUserInfo = () => ajax(BASE_URL + '/api/user_info');