网站seo服务商,商标网官网,甘肃省住房和城乡建设部网站官网,电子商务网站建设公司文章目录 Vue之调用store的action(包含getter调用)调用store的action方法一#xff1a;Promise 链式调用方法二#xff1a;async/await方法三#xff1a;Promise.all()同时执行 调用store的getter方法一#xff1a;this.$store.getters调用方法二#xff1a;mapGetters调用… 文章目录 Vue之调用store的action(包含getter调用)调用store的action方法一Promise 链式调用方法二async/await方法三Promise.all()同时执行 调用store的getter方法一this.$store.getters调用方法二mapGetters调用 示例代码 Vue之调用store的action(包含getter调用)
调用store的action
方法一Promise 链式调用
this.$store.dispatch(actionOne).then(() {return this.$store.dispatch(actionTwo);}).then(() {return this.$store.dispatch(actionThree);}).catch(error {// 处理错误console.error(error);});这种方式会依次触发这三个 action并在每个 action 完成后再触发下一个 action。
方法二async/await
async someMethod() {try {await this.$store.dispatch(actionOne);await this.$store.dispatch(actionTwo);await this.$store.dispatch(actionThree);} catch (error) {// 处理错误console.error(error);}
}使用 async/await 可以让代码看起来更像同步操作但依然是异步执行。这样的方式也可以让后续的 action 等待前一个 action 完成后再执行。
方法三Promise.all()同时执行
Promise.all([this.$store.dispatch(actionOne), this.$store.dispatch(actionTwo), this.$store.dispatch(actionThree)]).then(results {// 所有异步操作都成功完成results 是包含每个异步操作结果的数组console.log(results);}).catch(error {// 至少有一个异步操作失败console.error(error);});总结选择哪种方式取决于你的需求以及这些 action 之间是否有依赖关系。如果它们之间是独立的可以同时执行那么使用 Promise.all() 可能更合适。如果需要按顺序执行可以使用 Promise 链式调用或 async/await。
调用store的getter
方法一this.$store.getters调用
如果你在 Vue.js 组件中的 methods 部分想要调用 Vuex store 中的 getter你可以通过使用 this.$store.getters 来访问。假设你有一个名为 getCityList 的 getter你可以这样在组件的 methods 中调用它
export default {methods: {someMethod() {// 调用 Vuex store 中的 getCityList getterconst cityList this.$store.getters.getCityList;}},// 其他组件选项...
};在上面的例子中this.$store.getters.getCityList 就是访问 Vuex store 中 getCityList getter 的方法。
方法二mapGetters调用
确保你使用的 getter 名称和 Vuex store 中的命名一致。如果你在使用模块化的 Vuex store也需要考虑模块的命名空间。在这种情况下你可以使用 mapGetters 辅助函数这将自动处理命名空间。
import { mapGetters } from vuex;export default {computed: {// 使用 mapGetters 辅助函数将两个 getter 映射到计算属性...mapGetters([getCityList, getCountryList])},methods: {someMethod() {// 直接访问映射后的计算属性const cityList this.getCityList;const countryList this.getCountryList;}},// 其他组件选项...
};上面的代码假设你已经在组件中使用 mapGetters 映射了 getCityList和getCountryList的getter。
示例代码
src/store/modules/city.js
//接口
import { getCityListAPI } from /api/commonAPI.js;const state {cityList: []
}const getters {getCityList: state {var list;//先从session中获取获取不到再从state里获取if (sessionStorage.getItem(cityList)) {list JSON.parse(sessionStorage.getItem(cityList));} else {list state.cityList;}return list;}
}const mutations {[SET_CITY_INFO](state, data) {state.cityList data null ? {} : data;//设置进session中sessionStorage.setItem(cityList,JSON.stringify(data))}
}const actions {//调用接口获取地市放进session中setCityList({commit}) {return new Promise(resolve {getAllCityListAPI().then(res {commit(SET_CITY_INFO, res);resolve()});})}
}export default {state,getters,mutations,actions
};src/store/index.js
import Vue from vue;
import Vuex from vuex;
import createPersistedState from vuex-persistedstate;
import city from ./modules/city;Vue.use(Vuex);export default new Vuex.Store({modules: {city},plugins: [createPersistedState({ storage: window.sessionStorage })]
});调用action
Promise.all([this.$store.dispatch(setCityList)).then(results {console.log(获取地市列表信息----------------);}).catch(error {// 至少有一个异步操作失败console.error(error);});调用getter
export default {methods: {someMethod() {// 调用 Vuex store 中的 getCityList getterconst cityList this.$store.getters.getCityList;}},// 其他组件选项...
};
