详解vuex 中的 state 在组件中如何监听
前言
不知道大家有没有遇到过这样一种情况？ vuex中的state会在某一个组建中使用，而这个状态的初始化是通过异步加载完成的。组件在渲染过程中，获取的state状态为空。也就是说组件在异步完成之前就已经完成渲染了，导致组件的数据没有来得及渲染。
问题举例
举例说明如下：
// topo.vue
created() {
this.getUserAndSysIcons();
},
methods: {
getUserAndSysIcons() {
const self = this;
// 用户图标
iconApi.getUserIcons().then(response => {
self.$store.dispatch('setUserIcons', response.data);
});
}
}
在topo.vue中created或者mounted完成的时候调用 getUserAndSysIcons() 异步初始化userIcons，方便在其他组件中使用这个数据。
// modifyhost.vue
mounted() {
this.userIcons = this.$store.state.topo.userIcons; // 用户图标
}
在modifyhost.vue中渲染数据是，需要使用userIcons。在modifyhost.vue组件mounted完成的时候，userIcons数据还没有被初始化。导致modifyhost.vue渲染为空。
思考
想的是，当topo.vue中异步获取userIcons完成的时候，再去将modifyhost.vue组件中的userIcons初始化。这样就会自动改变完成渲染。那么怎么知道异步什么时候完成呢？
于是就想到了vue一个好东西watch监听，监听某一个数据的变化。我们都知道是，很容易监听组件中局部数据的变化。那么，这里怎么去监听state中的变化呢？于是有利用了computed计算属性。具体操作如下：
解决
在computed中写一个计算属性getUserIcons,返回状态管理中的userIcons。然后在watch中监听这个计算属性的变化，对modifyhost.vue中的userIcons重新赋值。
computed: {
getUserIcons() {
return this.$store.state.topo.userIcons;
}
},
watch: {
getUserIcons(val) {
this.userIcons = val;
}
}
最终效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Vuex 在Vue 组件中获得Vuex 状态state的方法，包括了Vuex 在Vue 组件中获得Vuex 状态state的方法的使用技巧和注意事项，需要的朋友参考一下 Vuex使用单一状态树（一个对象就包含了全部的应用层级状态），它作为唯一数据源存在，每个应用仅仅有一个store实例。 单一状态树使得我们能够直接定位任一特定的状态片段，在调试过程中也能轻易地取得整个当前应用状态的快
-
本文向大家介绍React中如何监听state的变化？相关面试题，主要包含被问及React中如何监听state的变化？时的应答技巧和注意事项，需要的朋友参考一下 16.x 之前使用componentWillReveiveProps componentWillReceiveProps (nextProps){ if(this.props.visible !== nextProps.visible){
-
单一状态树 Vuex 使用 单一状态树 - 是的，用一个对象就包含了全部的应用层级状态，然后作为一个『唯一数据源(SSOT)』而存在。这也意味着，每一个应用将只有一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。 单状态树和模块化并不冲突 - 在后面的章节里我们会讨论如何将状态(state)和状态变更事件(mutation
-
1. 前言 本小节我们将学习和使用 Vuex 中 state 的概念。包括如何创建 state、组件中获取 state、以及辅助函数 mapState 的使用方法。 2. 创建数据仓库 在上一小节中，我们已经给大家写了一个简单的示例，大家一定还记得 Vuex.Store({...}) 这个方法。在 Vuex 中，我们通过该方法创建一个数据仓库，并把数据 state 传入。例如: const sto
-
本文向大家介绍Vuex中的State使用介绍，包括了Vuex中的State使用介绍的使用技巧和注意事项，需要的朋友参考一下 现在在上一篇为什么要使用Vuex的介绍理解基础上使用Vuex中的State，一个正面例子来证实，同时也介绍一下Vue核心概念State。 Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每
-
本文向大家介绍vue-vuex中使用commit提交mutation来修改state的方法详解，包括了vue-vuex中使用commit提交mutation来修改state的方法详解的使用技巧和注意事项，需要的朋友参考一下 在vuex中，关于修改state的方式，需要commit提交mutation。官方文档中有这么一句话： 更改 Vuex 的 store 中的状态的唯一方法是提交 mutatio