vuex

Posted 2020-12-18 maxiag

Vuex是什么
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件自检数据的共享

使用Vuex统一管理状态(数据)的好处
①能够在vuex中集中管理共享数据,易于开发和后期维护
②能够高效的实现组件之间的数据共享,提高开发效率
③存储在vuex中的数据都是响应式的,能够实现保存数据与页面的同步

什么样的数据适合存储到Vuex中
一般情况下,只有组件之间共享的数据,才有必要存储到vuex中, 对于组件中的私有数据,依旧存储在组件自身的data中即可

安装vuex依赖包

npm install vuex --save

 

VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vuex有五个核心概念 分别是:

state, getters, mutations, actions, modules。

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

 4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

 5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

 

1.state

state提供唯一的公共数据源的,所有共享的数据都要统一放到 State中进行存储
组件访问 State中的数据 的第一种方式:

this.$store.state.全局数据名称

组件访问State中的数据的第二种方法:

// 1. 从 vuex中按需导入mapState函数
import {mapState} from ‘vuex‘
// 通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性:
// 2. 将全局数据,映射为当前的计算属性
computed: {
...mapState([‘全局数据名称‘])
}

　dispatch：异步操作，写法： this.$store.dispatch(‘mutations方法名‘,值)

　commit：同步操作，写法：this.$store.commit(‘mutations方法名‘,值)