使用场景说明:
项目中未读数字提醒功能实现。首页部分是模块列表,点击不同的模块可以进入子模块,子模块列表的未读数数据和首页使用同一接口(该接口返回所有有未读数据的模块的未读数字)
使用说明:
以上场景适合使用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为使用页面定义的变量
})
Logo

前往低代码交流专区

更多推荐