这篇文章主要介绍了Vuex如何用state监听数组变化的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vuex如何用state监听数组变化文章都会有所收获,下面我们一起来看看吧。代码如下:import
这篇文章主要介绍了Vuex如何用state监听数组变化的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇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监听数组变化”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vuex如何用state监听数组变化”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。
--结束END--
本文标题: vuex如何用state监听数组变化
本文链接: https://www.lsjlt.com/news/345870.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0