Vuejs：如何在 Vue 文件中查看存储答案

【问题标题】：Vuejs : How to watch store in a Vue fileVuejs：如何在 Vue 文件中查看存储
【发布时间】：2020-11-17 23:47:35
【问题描述】：

我这里有 2 个 vue 文件。 header.vue 和 sidebar.vue。两个组件都导入到 layout.vue 中。

步骤

1 当页面加载时，我会在 header.vue 中更新存储，并在创建的钩子中使用一些值。

2 我在 sidebar.vue 中做了一件与 store 相关的特定事情，一旦 store 具有特定值（ppglink - 只有在 store 从 header 更新时才会出现），就需要完成该事情

Sidebar.vue：

<li class="nav-item">
  <a class="nav-link" :href="ppgLink" target="_blank">
   ppglink
 </a>
</li>

mounted() {
 this.ppgLink = this.$store.state.website.ppglink;
}

ppgLink 可以是任何链接（例如 - www.google.com）

ppgLink 在 header.vue 的 created() 中更新 store 时获取它的值。有时 ppgLink 会正确获取它的值，（这种情况可能是侧边栏的挂载仅在 created() 完成后执行）。但在其他情况下，它将是 - 未定义的。

有没有办法使用 watcher: 来观察 store，就像我们在 vue 文件中观察其他变量一样，一旦 store 有一些变化就更新 ppg 链接。或者任何人都可以建议一个正确的方法，以便 ppglink 总是得到它的值，也许一旦 ppglink 在 header 中更新，sidebar.vue 中的一些代码行应该被执行。

在这个 SO 问题中经历了许多答案 - vue.js 2 how to watch store values from vuex 但我猜它有点老了，没有得到正确的解决方案。谁能指点我正确的方式

【问题讨论】：

您能添加您的 Vuex 商店的代码吗？另外请在 Header.vue 和 Sidebar.vue 中提供所有相关代码。顺便说一句，我建议您遵循最佳实践并使用mapState 将ppgLink 状态映射到计算属性，然后按照您提供的链接中的说明进行观察。另外你为什么说你没有得到正确的解决方案？如果实施得当，它应该可以正常工作。

标签： javascript vue.js

【解决方案1】：

有没有办法使用watcher来观察store，就像我们在vue文件中观察其他变量一样

是的，您可以像这样在 Vue 组件中查看状态中的变量：

import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["myField"])
  },
  watch: {
    myField(newVal) {
      console.log(newVal);
    }
  }
}

【讨论】：