Используя Vuex и Composition API, есть ли способ получить доступ к реактивным свойствам? - PullRequest
Новая
       19

Используя Vuex и Composition API, есть ли способ получить доступ к реактивным свойствам?

0 голосов
/ 03 марта 2020

Если я создаю свой компонент следующим образом: 

<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 }} не реагирует в этом случае?

1 Ответ

1 голос
/ 03 марта 2020

count: store.getters.count означает, что вы сохраняете текущее значение store.getters.count в качестве значения по умолчанию для вашего состояния count.

Это означает, что оно не будет реагирующим. Обратите внимание, что count в хранилище является функцией.

Вместо этого вы можете попробовать сделать ваше состояние count вычисляемым свойством, чтобы оно корректно обновлялось.

Я не пробовал Композицию API пока нет, но я надеюсь, что смогу помочь.

...