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> &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;default&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;"index",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;computed:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;poducts()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.$store.state.app.products &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mounted()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this.products.length&nbsp;<=&nbsp;0)&nbsp;this.$store.dispatch('getProducts'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}</script>错误原因：&nbsp;你先给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&nbsp;default&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;"index",&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;data()&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;products:&nbsp;this.$store.state.app.products//这里你赋值给products&nbsp;模板循环的是&nbsp;productData&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;mounted()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//这里是每次进入这个组件都会执行这里的代码 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//你在这里从新赋值给store中getProducts你不需要参数吗 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this.products.length&nbsp;<=&nbsp;0)&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$store.dispatch('getProducts'); &nbsp;&nbsp;&nbsp;&nbsp;} }</script>`