概述
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex核心概念用法
state
store中使用state存储状态在组件中访问state:
import { mapGetters, mapMutations, mapState } from 'vuex';
1.this.$store.state.name;
2....mapState(['age'])
mapState获取stateGetter
store中的getters在组件获取getters:
1.this.$store.getters.nameInfo;
2....mapGetters([ 'nameInfo']);
gettersMutation
使用mutations同步update 状态mutations 更新状态的用法:
import { mapMutations,mapActions } from "vuex";
1....mapMutations({SOME_MUTATION:'SOME_MUTATIONf' }),在组件中this.SOME_MUTATION("setTypesName");更新状态。
2.store.commit("setName", "新的name");
3.Vue.set(store.state, "name", "vueName");
4.Vue.delete(store.state, "name");
更新mutationactions
actions用来操作异步actions的用法:
import { mapMutations,mapActions } from "vuex";
1. ...mapActions({incrementAsync: 'incrementAsync' }), 组件中可以直接使用this.incrementAsync().
2.this.$store.dispatch('incrementAsync',"dddddffff"); 将 `this.incrementAsync()` 映射为 `this.$store.dispatch('increment')`;
actions
网友评论