vuex中action的使用场景及具体使用说明

使用场景说明：
项目中未读数字提醒功能实现。首页部分是模块列表，点击不同的模块可以进入子模块，子模块列表的未读数数据和首页使用同一接口（该接口返回所有有未读数据的模块的未读数字）
使用说明：
以上场景适合使用vuex中的action属性，在不同的模块中直接调用dispatch对action中的具体方法进行分发即可。
实现：
store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)
const state = {
    numRemindObj: {} //未读消息数字提醒
}
const actions = {
    getNumRemind(context, vm) {
    	//注：此处不能通过引入封装好的axios请求的js文件或者this.$axios进行接口访问，因为this的指向不同，此处的this指向Store，而一般组件中使用的话是挂载在vue的实例上，this指向的是Vue，所以需要通过直接引入axios进行接口的请求
        // return new Promise((resolve, reject) => {
        axios({
                url: '接口地址',
                method: 'get',
                data: {},
                dataType: 'json',
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                }
            })
            .then(res => {
                // console.log(res)
                let data = res.resultData
                context.commit('numRemindObj', data)
                    // resolve()
            })
            // })
    }
}
const getters = {
    numRemindObj: state => state.numRemindObj
}
const mutations = {
    numRemindObj(state, numObj) {
        state.numRemindObj = numObj
    }
}
export default new Vuex.Store({
    strict: process.env.NODE_ENV !== 'production',
    state,
    actions,
    getters,
    mutations
})

使用页面调用：

computed:{
	...mapGetters([
		"numRemindObj"
	]),
},
methods: {
    ...mapActions([
       "getNumRemind"
    ]),
},
mounted () {
    this.$store.dispatch('getNumRemind')
}

注：如果直接在mounted中直接打印vuex中的numRemindObj这个值，是打印不出来的，是因为先后顺序的问题，但是可以直接在页面中使用，状态是已经改过来的。
想要可以正常打印出来，重新赋值给使用页面声明的变量，可以进行如下操作：
actions内请求接口可以使用primise，添加return new Promise((resolve, reject) => {}) ，在执行完后添加resolve()，在页面上在then内进行打印是可以打印出来或者给当前页面的变量进行赋值的

this.$store.dispatch('getNumRemind')
	.then(() => {
		console.log(this.$store.state.numRemindObj);
		console.log(this.numRemindObj)
		this.numObj = this.$store.state.numRemindObj  //numObj为使用页面定义的变量
})