Vuex状态管理

概述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex

核心概念用法

state

store中使用state存储状态

在组件中访问state:

import { mapGetters, mapMutations, mapState } from 'vuex';

1.this.$store.state.name;

2....mapState(['age'])

mapState获取state

Getter

store中的getters

在组件获取getters:

1.this.$store.getters.nameInfo;

2....mapGetters([ 'nameInfo']);

getters

Mutation

使用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");

更新mutation

actions

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

Module

编写module

在index中导入

在组件中使用

参考文献

vuex官网