vuex存取值和映射函数使用说明

import vue from 'vue';
import Vuex from 'vuex';

vue.use(Vuex);

export default new Vuex.Store({
 strict:true,//严格模式，防止直接修改state（性能很差，发布时改为false）
 state:{
 a:1,
 b:2
 },
 mutations:{
 addA(state,val){
  state.a+=val;
 },
 addB(state,val){
  state.b+=val;
 }
 },
 actions:{
 addA({commit},val){
  //调用mutations中的addA()
  commit('addA', val);
 },
 addB({commit},val){
  //调用mutations中的addB()
  commit('addB', val);
 }
 },
 //相当于computed
 getters:{
 getA(state){
  return state.a;
 },
 getB(state){
  return state.b;
 },
 count(state){
  return state.a + state.b;
 }
 },
 modules:{

 }
});

import store from './store';

new Vue({
 el: '#app',
 store,
 components: { App },
 template: ''
})

 a:{{$store.getters.getA}}
 

 b:{{$store.getters.getB}}
 

 a+b={{$store.getters.count}}

syncUserInfo({commit}, userInfo){
  commit(USER_INFO, {userInfo});
},

 import {
  USER_INFO
 } from './mutation-types'

 import {
  USER_INFO
 } from './mutation-types'

[USER_INFO](state, {userInfo}) {
 state.userInfo = userInfo;
 },

 import {mapActions} from 'vuex'
 methods: {
  // 存到vuex-是个方法。需要...延展符展开
  ...mapActions(['syncUserInfo']),
 }

computed:{
 ...mapState(['userInfo'])
},

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

// 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});
 }
},

import {
 getUserInfo,
} from '../api'
----------------------
api-index.js
// 2.9 获取登录的用户信息
export const getUserInfo = () => ajax(BASE_URL + '/api/user_info');