使用 Vuex 和 Composition API，有没有办法访问响应式属性？

Question

如果我这样设计我的组件：

<template>
  <div>
    <button @click="increment">Count is: {{ store.getters.count }}</button>
  </div>
</template>

<script>
import { reactive } from "@vue/composition-api";
import store from "../store";

export default {
  name: "Count",

  setup() {
    const state = reactive({
      store
    });
    const increment = () => {
      store.dispatch.increment();
    };
    return {
      ...state,
      increment
    };
  }
};
</script>

我的商店是这样定义的：

import Vue from "vue";
import Vuex from "vuex";
import { createDirectStore } from "direct-vuex";

Vue.use(Vuex);

const {
  store,
  rootActionContext,
  moduleActionContext,
  rootGetterContext,
  moduleGetterContext
} = createDirectStore({
  state: {
    count: 0
  },
  getters: {
    count: state => state.count
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit("increment");
    }
  }
});

// Export the direct-store instead of the classic Vuex store.
export default store;

// The following exports will be used to enable types in the
// implementation of actions and getters.
export {
  rootActionContext,
  moduleActionContext,
  rootGetterContext,
  moduleGetterContext
};

// The following lines enable types in the injected store '$store'.
export type AppStore = typeof store;
declare module "vuex" {
  interface Store<S> {
    direct: AppStore;
  }
}

有什么方法可以比模板中的 {{ store.getters.count }} 更好地访问计数？理想情况下，我想像 {{ count }} 一样访问它，但似乎只有 store 是反应式的。换句话说，如果我发送增量操作，``{{ count }}` 不会更新，即使我尝试以各种方式定义计数。这是我尝试过的一件事：

  setup() {
    const state = reactive({
      store,
      count: store.getters.count
    });
    const increment = () => {
      store.dispatch.increment();
    };
    return {
      ...state,
      count: state.count,
      increment
    };
  }

为什么 {{ count }} 在这种情况下没有反应？

Answer 1

count: store.getters.count 表示您将 store.getters.count 的当前值存储为状态 count.

的默认值

这意味着它不会反应。请注意，商店中的 count 是一个函数。

您可以尝试将您的状态 count 改为计算属性，这样它就能正确更新。

我还没有试过作文API，但我希望能帮到你。

使用 Vuex 和 Composition API，有没有办法访问响应式属性？

Using Vuex and the Composition API, is there a way to access reactive properties?

typescript

vue.js

reactive-programming

vuex

vue-composition-api