Vuex 是否可以在 Vue 组件中管理本地状态

Question

目前，我正在使用 Vuex 来管理应用程序级状态。

我只需要在 Vue 组件生命周期内存储数据。是否可以在不涉及全局存储的情况下使用 Vuex 来存储本地组件状态？

例如，我有一个这样的组件：

class SomeComponent extends Vue {
  id = this.$props.componentId;
  localData = {};

  async created() {
    this.localData = await apiClient.getDataById(this.id);
  }
}

然后我可以使用具有不同 prop componentId 的组件，并且每个组件都应该管理自己的状态。

<SomeComponent componentId="1" />
<SomeComponent componentId="2" />
<SomeComponent componentId="3" />

我希望看到如此理想的变体：

import LocalStore from './local-store';

class SomeComponent extends Vue {
  id = this.$props.componentId;
  localStore = new LocalStore(); // <- this is the Vuex store

  created() {
    localStore.getDataById(this.id);
  }
}

Answer 1

是的，这绝对是可能的。我从未使用过基于类的语法，但在基于对象的语法中，它看起来像这样

<div>
  <p>{{ state1 }}<p>
  <p>{{ state2 }}</p>
  <p>{{ localState }}</p>
</div>

export default {
  computed: {
    state1() {
      return this.$store.state.state1;
    }
    state2() {
      return this.$store.state.state2;
    }
  },
  data() {
    return {
       localState: 3
    }
  },
  props: {
    componentId: {
      type: Number
  },
}

再一次，我从未使用过类基语法，但它可能看起来像这样的伪代码

import { Prop } from 'vue-class-component'

export default class App extends Vue {
  get state1() {
    return this.$store.state.state1;
  }
  get state2() {
    return this.$store.state.state2;
  }

  localState = 3

  @Prop()
  componentId: Number
}