今天小编给大家分享一下vuex中如何利用state监听数组变化的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
messArray:[]
}
const mutations = {
modifyArray(state, obj){
state.messArray=obj.messArray
// Vue.$set(this,this.messArray,[...obj.messArray])
}
const actions={
modifyArr(context,obj){
context.commit('modifyArray',obj)
},
}
export default new Vuex.Store({
state,
mutations,
actions
})
然后在组建的data中,通过mapState映射过去:
//在使用事前必须引入这个
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
data() {
return {
...mapState(["messArray"]),
}
}
然后在watch中设置了监听:
watch:{
messArray: function(val){
console.log("watch ChildA.vue "+val)
}
}
这个时候问题就出来了,虽然数组修改了,但是watch就是监听不到。
解决办法
在我搜索了一些网上的办法之后,发现大部分我都用不来,最后只能巧妙的通过computed和getter解决了这个问题。
给刚才的store.js添加一个getter
const getters = {
messArray_get:state=>state.messArray,
}
然后在要监听变化的组件中的computed中添加如下代码:
...mapGetters(['messArray_get']),
然后在watch中这样写
watch:{
messArray_get : function(val){
console.log("messArray_get "+val)
}
}
以上就是“vuex中如何利用state监听数组变化”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://my.oschina.net/u/4279392/blog/4412642