Javascript 如何从存储值反应性地更新组件中的值？

根据这里的文档，我有两个组件和一个基本存储：

我希望这样，当我输入一个输入时，另一个组件中的值通过使用存储更新

这里有一个基本的例子

App.vue

<template>
  <div id="app">
    <h1>Store Demo</h1>
    <BaseInputText /> Value From Store: {{ test }}
  </div>
</template>

<script>
import BaseInputText from "./components/BaseInputText.vue";
import { store } from "../store.js";

export default {
  // This should reactively changed as per the input
  computed: {
    test: function() {
      return store.state.test;
    }
  },
  components: {
    BaseInputText
  }
};
</script>

  data() {
    return {
      state: store.state
    };
  },
  computed: {
    test: function() {
      return this.state.test;
    }
  },

我希望这样，当我在输入中键入字符串时，App.vue中的

test

变量将被更新。我试图了解商店模式是如何运作的。我知道如何使用道具

我这里还有一份工作副本：

已更新
2.6.0+
使存储反应性使用

Vue.observable

（在2.6.0+中添加）

store.js

export const store = {
  debug: true,
  state: {
    test: "hi"
  },
  setTest(newValue) {
    if (this.debug) console.log("Set the test field with:", newValue);
    this.state.test = newValue;
  }
};

import Vue from 'vue'

export const store = Vue.observable({
  debug: true,
  state: {
    test: 'hi'
  }
})

import Vue from 'vue'

export const store = new Vue({
  data: {
    debug: true,
    state: {
      test: 'hi'
    }
  }
})

BaseInputText.vue

<input type="text" class="input" v-model="state.test">
...
data() {
    return {
      state: store.state
    };
  },

<input type="text" class="input" v-model="state.test">
...
data() {
  return {
    state: store.state
  };
}

BaseInputText.vue

<input type="text" class="input" v-model="state.test">
...
data() {
    return {
      state: store.state
    };
  },

<input type="text" class="input" v-model="state.test">
...
data() {
  return {
    state: store.state
  };
}

---

这看起来很糟糕，但我看不到另一种方法可以让它起作用

我看到了你的第一个答案，事实上这更接近于正确。我更改了它，因此不再直接引用存储值，而是引用状态。i、 e.{{state.test}}而不是{{test}。如果你把它换回来，我会接受答案：）。它对你有用吗？我重新加载了页面，但对我来说没有）你可以看到更清晰的解决方案，使用observable（需要2.6版）是的，如果进行随机更改，然后再将其更改回来，这似乎是可行的。奇怪的我喜欢你的新解决方案，但到目前为止我还没有使用2.6。因此，要澄清整体问题，需要直接引用存储中的值。已使用vue早期版本的解决方案进行更新。谢谢你提出的有趣的问题。如果你想更新

存储

的状态，你应该使用

突变

。直接修改存储是一种反模式，您将看到一个控制台警告。这适用于文档中引用的存储模式。抱歉，vuex标记有点误导。