Question

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

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

例如，我有一个类似的组件：

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

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

然后，我可以使用具有不同属性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
}

Vuex是否可以管理Vue组件内的本地状态

1 个答案: