Есть ли способ получить доступ к реактивным свойствам с помощью 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 вместо этого вычисляемое свойство, чтобы оно правильно обновлялось.

Я еще не пробовал Composition API, но надеюсь, что смогу помочь.