Блог

У меня есть два компонента и базовое хранилище в соответствии с документами здесь:https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch.

Я хочу сделать так, чтобы при вводе во входные данные значение в другом компоненте обновлялось с помощью хранилища.

Вот базовый пример.

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>
  

BaseInput.vue

 <template>
  <input type="text" class="input" v-model="test" />
</template>

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

export default {
  data() {
    return {
      test: store.state.test
    };
  },
  // When the value changes update the store
  watch: {
    test: function(newValue) {
      store.setTest(newValue);
    }
  }
};
</script>
  

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;
  }
};
  

Я хочу сделать так, чтобы при вводе строки во входные данные обновлялась test переменная в App.vue. Я пытаюсь понять, как работает шаблон хранилища. Я знаю, как использовать props.

У меня также есть рабочая копия здесь: https://codesandbox.io/s/loz79jnoq ?размер шрифта = 14

Обновлено
2.6.0
Для реактивного использования хранилища Vue.observable (добавлено в версии 2.6.0 )

store.js

 import Vue from 'vue'

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

BaseInputText.vue

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

до версии 2.6.0

store.js

 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
  };
}
  

Старый ответ
Из документации However, the difference is that computed properties are cached based on their reactive dependencies .Хранилище не реагирует

Изменить на

App.vue

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

Это выглядит плохо, но я не вижу другого способа заставить это работать