VUEX回顾

一、VUEX

定义

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

理解

• Vue 应用中的每个组件在 data() 中封装着自己数据属性，而这些 data 属性都是私有的，完全隔离的。
• 如果我们希望多个组件都能读取到同一状态数据属性，或者不同组件的行为需要更新同一状态数据属性，这就需要一个将共享的状态数据属性进行集中式的管理。
• 这就是 Vuex 状态管理所要解决的问题
• • vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。
• 因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值

二、VUEX入门实战

初始化vuex工程

读取状态值state

理解

1. 每一个 Vuex 项目的核心就是 store（仓库）。 store 就是一个对象，它包含着你的项目中大部分的状态(state)。
2. state 是 store 对象中的一个选项，是 Vuex 管理的状态对象（共享的数据属性）

实操

1. 创建store文件夹，Import Vuex（导入） 后 use（引入），new Vuex
2. main.js中vue实例对象中注册，导入store.js
3. 组件中读取count: {{ $store.state.count }}

改变状态值mutation

理解

1. 在 store 的 mutations 选项中定义方法，才可以改变状态值。
2. 在通过 $store.commit(‘mutationName’) 触发状态值的改变

实操

不同组件共享状态值

• 组件获取，共享

提交荷载

• $store.commit 传入额外的参数，即 mutation 的 载荷（payload）：
• 
• 

Action

• Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是在组件中直接变更状态， 通过它间接更新 state。
• 在组件中通过 this.$store.dispatch(‘actionName’) 触发状态值间接改变
• Action 也支持载荷
• Action 可以包含任意异步操作。
• context是上下文
• 

派生属性getter

• 有时候我们需要从 store 中的 state 中派生出一些状态。例如：基于上面代码，增加一个 desc 属性，当 count 值小于 50，则 desc 值为 吃饭 ; 大于等于 50 小于100，则desc 值为 睡觉 ; 大于100 , 则 desc 值为 打豆豆 。这时我们就需要用到 getter 为我们解决。
• getter 其实就类似于计算属性(get)的对象.
• 组件中读取 $store.getters.xxx
• 

三、Module模块化项目结构

Module

• 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。
• 当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
• 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。
  每个模块拥有自己的 state、mutation、action、getter 等
  

标准项目结构

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。