Estoy tratando de aprender Vue3 + Pinia, y tengo una tienda Pinia con una acción asíncrona que obtiene datos JSON y los guarda en el estado. En mi plantilla Vue3, cuando ese estado cambia (cuando hemos recuperado los datos JSON) quiero ejecutar alguna otra función. ¿Cómo hago esto?
Esta es mi tienda:
import { defineStore } from "pinia"; export const useMap = defineStore("map-store", { state: () => { return { locations: [], fetching: false, }; }, getters: { results(state) { return state.locations; }, isFetching(state) { return state.fetching; }, }, actions: { async fetchLocations() { console.log("fetching locations"); this.fetching = true; const response = await fetch("/data/locations.json"); try { const result = await response.json(); this.locations = result.locations; console.log(result.locations); } catch (err) { this.locations = []; console.error("Error loading new locations:", err); return err; } this.fetching = false; }, }, });Esta es mi plantilla Vue3 que usa esa tienda:
<script setup> import { useMap } from "../store/map.js"; </script> <script> import { mapState, mapActions } from "pinia"; export default { computed: { ...mapState(useMap, { locations: "results" }), }, methods: { ...mapActions(useMap, ["fetchLocations"]), }, created() { this.fetchLocations(); }, }; </script> Entonces, lo que quiero hacer es, después de this.fetchLocations recupere las ubicaciones y las guarde para establecerlas como this.locations , quiero ejecutar un método como addMarkers(){ //add markers to a map based on location data } .
¿Cómo hago esto?
Puede usar la opción de watch para observar los cambios de estado y ejecutar su método dentro de su controlador:
watch:{ locations:{ handler(newVal,oldVal){ this.addMarkers(); }, deep:true } }