向vuex存储数据和获取数据-和直接调用actions.js中的异步方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

向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的异步方法--

?

1	this.$store.dispatch

?

1 2 3 4

created(){    // 调用vuex-actions中的方法-刚进入app，就需要验证登录的时效性    this.$store.dispatch('getUserInfo') },

　　actions.js

?

1 2 3 4 5 6 7 8

// 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');