vuex数据更新的问题

Question

<script>
    export default {
        name: "index",
        data() {
            return {
                products: this.$store.state.app.products
            }
        },
        mounted() {
            if (this.products.length <= 0) this.$store.dispatch('getProducts');
        }
    }
</script>

<template>
<ul>
<li v-for="(product,index) of productData ">{{prduct.title}}</li>
</ul>
</template>

在vuex中的actions中异步获取数据赋值给 products

但是这样做第一次加载时不会有数据的 只有在路由切换后才有数据

有什么办法让vuex中赋值之后这边组件中的数据及时更新???

Answer 1

products不要放在data里定义，应该放在computed计算属性里定义:

<script>
    export default {
        name: "index",
        computed: {
            poducts() {
                return this.$store.state.app.products
            }
        },
        mounted() {
            if (this.products.length <= 0) this.$store.dispatch('getProducts');
        }
    }
</script>

错误原因：
你先给data中的products赋值为this.$store.state.app.products然后vuex异步获取数据给state.app.products。
此时vuex中的products得到数据后更新，但是data不会响应式的根据vuex中的products的改变来改变，所以data里的products没有数据。
切换路由后，你这个组件没有进行缓存，它在切换其他路由时已经被销毁，切换回来时重新渲染，取得vuex中的products。
此时vuex中products已经有了值，所以data里的products能得到数据。
下面是vuex文档中有提到得到state里值的方式最好是写在计算属性里面
vuex文档

Answer 2

没看懂你问题 你是在组件中获取不到store中更新后的products数据还是组件更新后 store获取不到products数据
一般都是利用监听来监听store中数据变化 希望对你有帮助 下次问题在描述具体点
`<script>

export default {
    name: "index",
    data() {
        return {
            products: this.$store.state.app.products//这里你赋值给products 模板循环的是 productData 
        }
    },
    mounted() {
        //这里是每次进入这个组件都会执行这里的代码
        //你在这里从新赋值给store中getProducts你不需要参数吗
        if (this.products.length <= 0) 
            this.$store.dispatch('getProducts');
    }
}

</script>`

Answer 3

你把this.$store.state.app.products放在data里去获取，这个data只会在组件加载出来的时候渲染一次，后面虽然vuex里面的值更新了，但是data里面是不会响应更新的，你要把this.$store.state.app.products放在计算属性里面去获取，还可以通过watch来监听，这样每次vuex有跟新都能同步到视图了`

    computed: {
        poducts() {
            return this.$store.state.app.products
        }
    },
    watch: {
        poducts(val, oldval) {
            ...
        }
    }`