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>`