Vuex监听

Vuex状态管理的数据有时候可能改变，这时候如果不进行监听，会出现状态管理数据并未动态改变的情况。
在vue页面中使用state中的数据时，如果将state数据赋值给data中的数据再进行使用的话，将拿不到vuex状态管理的值。可以直接使用this.$store.state.xxx.
一、Vuex数据监听

//1.在computed中把数据返回
computed: {test() {return this.$store.state.testflag}
},

immediate:true代表如果在wacth里声明了之后就会立即执行里面的handler方法.
newval就是获取到的testflag的最新值。this.oper()是testflag发生变化以后需要调用的函数。

// 在watch中监听
watch: {test: {immediate: true,handler: function(newval) {this.oper(newval)}}
}

二、另外一种监听：

this.$store.commit("函数名", 要存储的数据);
watch: {"$store.state.testflag"() {console.log("获得" + this.$store.state.testflag);},},
// Vuex中// 1、在state中定义一个对象接收　　　secret：“”// 2.在mutations接收一下并保存仓库setSecret(state, secret) {state.secret = secret},

三、mapState的用法：
当需要从vuex中获取的变量特别多是,可以使用mapState代替
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性。

computed:{...mapState({testflag: state => state.testflagtestShow: state => state.testShow})
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！