<!-- SelectColor.vue --> <script setup> import { defineProps } from "vue"; import { useStore } from "vuex"; import { storeData } from "./common"; let { resultColor } = storeData(); const props = defineProps({ selectType: String, }); const store = useStore(); const changeSelect = (e) => { store.commit("resultColor/updateResultColor", { type: props.selectType, value: e.target.value, }); }; const selectedOption = (type) => { return props.selectType == type; }; </script>Separé el código para obtener el estado de la tienda como se muestra a continuación y lo puse en un archivo diferente.
//common.js import { computed, reactive, toRefs } from "vue"; import { useStore } from "vuex"; const storeData = () => { const store = useStore(); let state = reactive({ count: computed(() => store.state.count.count), resultColor: computed(() => store.state.resultColor.resultColor), resultList: computed(() => store.state.count.result), }); return toRefs(state); }; export { storeData };Así, quiero separar este código.↓
const store = useStore(); const changeSelect = (e) => { store.commit("resultColor/updateResultColor", { type: props.selectType, value: e.target.value, }); };No quiero usar useStore repetidamente. ¿Hay una solución para esto?
Se supone que las funciones de use componible se usan directamente en la función de setup , o en el caso de <script setup> , en el nivel superior de la etiqueta. El uso en otros lugares depende de la implementación de la función y debe confirmarse.
useStore generalmente se usa una vez por componente:
import { useStore } from "vuex"; const store = useStore(); ...En caso de que el código no resida dentro de un componente, se puede importar una tienda directamente:
import store from '...'; En este caso, esto puede ser un problema XY porque si storeData necesita ser reestructurado constantemente, esto significa que la tienda fue diseñada incorrectamente. El objeto reactivo que contiene el state podría ser un captador dentro de la tienda, porque solo involucra datos de la tienda actualizados.