需要一些关于 VUEX 和 VUEJS 的指导答案

【问题标题】：Need some guidance in VUEX and VUEJS需要一些关于 VUEX 和 VUEJS 的指导
【发布时间】：2020-06-15 03:53:22
【问题描述】：

我的 vue 组件中有这个代码块

    <template>
<div class="col-3">
    <div class="card border-0 shadow-sm">
        <div class="card-header indigo bg-white border-0 pb-0">Categories</div>

        <div class="card-body pb-1">
            <ul class="list-unstyled pb-1">
                <li v-for="category in categories" :key="category.name" class="pb-1">
                    <i class="fas fa-angle-right indigo-light"></i>
                    &nbsp;<a class="text-secondary text-decoration-none" v-bind:href="'api/categories/'+category.name">
                        {{ category.name }}
                        </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        mounted() {
            this.$store.dispatch('fetchCategories')
        },
        computed: {
            ...mapGetters([
                'categories'
            ])
        }
    }
</script>

这会从我的 vuex 商店中获取类别，这一切都在工作。我想问的是如何使用 laravel echo 来改变我的观点？目前，当我通过 api (POSTMAN) 添加条目时，该条目是在我的表中创建的，但视图不会自动更新。 Pusher 正在工作，我可以看到通过 API 发布的数据，状态没有改变，结果也没有更新

我们将不胜感激。仅供参考，fetchCategories 代码块如下所示：

     fetchCategories({commit}) {
      axios.get('/api/categories')
          .then(res => {
              {
                  commit('GET_CATEGORIES', res.data.data)
              }
          }).catch(err => {
              console.log(err)
          })
  }

我的变异看起来像这样：

    GET_CATEGORIES(state, categories) {
    state.categories = categories
},

【问题讨论】：

标签： laravel vue.js vuex laravel-echo

【解决方案1】：

这里的问题是 state.categories 引用发生了变化。然后你需要通知 Vue 引用发生了变化。

尝试使用

Vue.set(state, 'categories', categories )

【讨论】：

当使用 Vue.set(....) 结果是一样的。视图没有更新

【解决方案2】：

你的状态对象是什么样的？

如果您的状态对象中没有类别，很可能在您将其添加到它之后，类别将不会是反应性的。

【讨论】：

让 state = { categories: [], } 导出默认状态