Vue / Vuex-窗口刷新后，存储值在Mounted（）中记录为零-但在组件更改后记录了正确的值

Question

我有一个在状态/存储中初始化为零的变量price。>>

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    filters: { price: 0 },
    ...
  }
并且在以下组件的输入范围滑块中使用。我是Vue / x的新手，正在尝试掌握何时何地更改数据。假设我使用价格滑块将price设置为400，并且该变异将其正确存储在商店中为400，如果刷新页面，它将记录为0，但是如果我在IDE中对组件进行了更改并重新安装，那么它将记录为400。我尝试在没有运气的情况下在update（）中分配this.price。作为计算函数，我会遇到“无设置器”错误。 （我是Vue的新手）

<template>
  <input v-model.number="price" type="number" />
  <input @input="handleSlide" @change="setPrice(price)" type="range"/>
</template>
export default {
  name: "price-range-slider",
  computed: mapState(["filters"]),
  data() {
    return {
      price: 0
    };
  },
  mounted() {
    this.price = this.filters.price;
    console.log(this.price); // displays 0 after page refresh, but correct value when component remounts from change.
  },
  methods: {
    setPrice(price) {
      state.commit("setPrice", price);
    }
  }
};

我有一个可变价格，在州/州/商店中初始化为零。 Vue.use（Vuex）;导出默认的新Vuex.Store（{状态：{过滤器：{价格：0}，...}并在输入范围滑块中使用...

Answer 1

刷新页面（包括商店）时，该应用程序已完全重置。因此，除非您为localStorage，cookie，会话等保存了一些值，否则它将丢失。