vuex中action的使用场景及具体使用说明
使用场景说明:项目中未读数字提醒功能实现。首页部分是模块列表,点击不同的模块可以进入子模块,子模块列表的未读数数据和首页使用同一接口(该接口返回所有有未读数据的模块的未读数字)使用说明:以上场景适合使用vuex中的action属性,在不同的模块中直接调用action中的方法即可。实现:store.jsimport Vue from 'vue'import Vuex from 'vuex'impor
·
使用场景说明:
项目中未读数字提醒功能实现。首页部分是模块列表,点击不同的模块可以进入子模块,子模块列表的未读数数据和首页使用同一接口(该接口返回所有有未读数据的模块的未读数字)
使用说明:
以上场景适合使用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为使用页面定义的变量
})
更多推荐
已为社区贡献21条内容
所有评论(0)