如何查看嵌套的 Vuex 存储值

发布于 2025-01-09 07:02:33 字数 501 浏览 1 评论 0原文

我有一个 Vue 项目，我需要在其中查看一些 Vuex 存储值。这是代码：

computed: {
    serverCategories: {
        get() {
            return this.$store.state[this.storeName].serverFilters.categories[0].value.name;
        },
        set(value) {
            return value;
        },
    }
},
watch: {
    serverCategories: {
        deep: true,
        handler(newVal, OldVal) {
            console.log(newVal);
        }
    }
},

但它不会对更改做出反应。尽管存储状态中的值已更改，但 serverCategories 仍包含相同的值。这段代码有什么问题？

原文

I have a Vue project where I need to watch some Vuex store values. Here is the code:

computed: {
    serverCategories: {
        get() {
            return this.$store.state[this.storeName].serverFilters.categories[0].value.name;
        },
        set(value) {
            return value;
        },
    }
},
watch: {
    serverCategories: {
        deep: true,
        handler(newVal, OldVal) {
            console.log(newVal);
        }
    }
},

But it does not react on changes. serverCategories still contains the same value although the value in store state is changed. What is wrong with this code?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

任谁 2025-01-16 07:02:33

您可以使用 vuex mapGetters ，将其包装在计算属性中（请参阅此处的文档）

我强烈建议您每次需要访问商店时都使用 getter，而不是 $store.state.myStore.myValue。

您还可以使用 vuex 来改变数据（通过 mutations 和 vuex 函数 mapMutations 或通过使用 mapActions 的 actions ）
示例：

存储

getters: {
  myValue: (state) => state.myValue
}

Vue 组件

<template>
   <p> {{ myValueFromGetter }}</p>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
   computed: {
   ...mapGetters({
      myValueFromGetter: 'myGetter/myValue'
   }
}
</script>

You can use the vuex mapGetters which you can wrap in your computed properties (see documentation here)

I would highly recommand using getters each time you need to access the store instead of $store.state.myStore.myValue.

You can also use vuex to mutate your data (through mutations and the vuex function mapMutations or though actions using mapActions)
Example :

store

getters: {
  myValue: (state) => state.myValue
}

Vue component

<template>
   <p> {{ myValueFromGetter }}</p>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
   computed: {
   ...mapGetters({
      myValueFromGetter: 'myGetter/myValue'
   }
}
</script>

回复收藏 0 原文

~没有更多了~