Vuex学习笔记

1.vuex 全局状态管理

• 1.1什么是vuex？

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

• 可以认为它是一个前端数据库，可以随时存取数据，对于整个前端是共享且同步的。

  • 注：理解

    • 拿到一个工具，我们第一时间需要弄明白的，就是这个工具到底能够帮助我们解决什么问题。比如锤子，砸得了鸡蛋打得了电话，比如苹果，不但能吃还能玩。那么 Vuex 呢，如果把 Vue.js 比喻成路人（走路的人）的话，那么 Vuex 就是他的桑塔纳，如果他想去隔壁买包烟，那走过去就行了，开个车过去反而是一种负担，但是如果他想去几十公里的学校采花，那桑塔纳就得派上用场了，不然等他走过去，可能花儿都谢了。

    • Vuex 的目的是为了管理共享状态，为了达到这个目的，它制定了一系列的规则，比如修改数据源 state、触发 actions 等等，都需要遵循它的规则，以此来达到让项目结构更加清晰且易于维护的目的。

    • 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

    • 其实了解了 Vuex 要干的活以后，什么时候翻牌，那就容易选择得多了。就像前面的类比一样，去隔壁买包烟，你还开个桑塔纳，找停车位的时间，烟都抽完了。

  • 所以，我们要根据项目的需要，来衡量短期和长期的效益，如果不打算开发大型的单页应用，那 Vuex 可能还是你的一个负担。对于一些不大不小的项目，自己又懒得走，开车又觉得麻烦，那你骑个共享单车过去也行嘛。

  • 这里的共享单车指代的是官方中的一个简单的 store 模式，其实就是一个单纯的全局对象

  • Vuex 和单纯的全局对象有以下两点不同：

  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

  • 你不能直接改变 store 中的状态。改变 store 中状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

  -注： 部分文档来自作者：大宏说-简书链接：https://www.jianshu.com/p/120eaf50331c

• 1.2. 使用Vuex的好处

  • 实现多个视图处于同一状态。
  • 处理来自不同视图的行为需要变更为同一状态。

• 1.3.补充：

• 多组件之间共享状态（多组件之间共享数据）

  • 单向数据流，组件内部只能使用，不能修改。
  • 当全局状态发生改变，所有使用此状态的组件都改变。

2.vuex的五大核心概念

1.state

• 全局的状态（数据）
  • 单向数据流，组件中只能使用，不能修改
  • 在组件中访问state：this.$store.state.xxx 可以获取数据
  • this.$store.state.xxx = yyy 不推荐，devtools没有修改记录。

state： （声明、陈述、状态）

• 用来存放组件之间共享的数据。他跟组件中的data选项，只不过组件中data是用来存放组件的私有数据。

2.getters

• 全局的计算属性，类似组件中的计算属性
  • 用于计算返回一个值，所有组件都可以使用
  • 根据 state和其他的getter进行计算

getters （获得者）

• 有时候我们需要从 store（仓库） 中获取一些数据，使用Getter来获取，Getter可以对数据进行操作，类似于computed（计算的）。

mutations

• 提供了修改state的方法(直接修改)
  • 只能在 mutations 中去修改state
  • 管理同步操作
  • 在组件中使用this.$store.commit(mutations中的方法，数据)修改state。

3.Mutations （变化）

• 更改 Vuex 的 store(仓库) 中的状态的唯一方法，且为同步方法，类似methods(方法）。

4.actions

• 提供了修改state的方法
  • 调用mutations中的方法来修改state(间接修改)
  • 管理异步操作
  • 在组件中使用this.$store.dispatch(actions中的方法，数据)。
  • actions中的方法再调用store.commit(mutations中的方法，数据)修改state。

Actions （行动、计划）

• Action会通过Mutation，让Mutation帮他提交数据的变更。
• Action支持异步请求

5.modules

• 划分模块
  • 避免store对象过于庞大，不方便使用和维护。

Modules (划分模块)

• 当应用变得非常复杂时，store（仓库） 对象就有可能变得相当臃肿。Vuex 允许我们将 store（仓库） 分割成模块（module）。每个模块拥有自己的 state（声明、陈述）、mutation（变化）、action（行动、计划）、getter（获得者）、甚至是嵌套子模块。

注意：

• state中只维护当前需要存的数据，定义好即可。
• 修改state中的数据需要通过mutations中的方法。
• mutations中的方法必须为同步的，例如（state.token = token）
• 修改state中的数据需要通过getter中的方法
• actions中可以使用异步方法

3.vuex和localStorage的区别？

1. vuex存储的数据在内存中（相对于一个全局对象）

• localStorage的数据以文件形式存储在本地
  • cookie本地存储

2. 当我们刷新页面时

• vuex的数据将会丢失、全局对象，刷新之后只有初始值，之前存的数据都丢失了。
• localStorage的数据不会丢失、永久性存储。

3. vuex用于多组件之间共享数据

• localStorage用于多页面之间共享数据(cookie也是一样的)

注意：

• 但是！！localstorage不是数据响应式
  • vuex为数据响应式！！ 数据变 -> 视图变（dom更新）
    • 当一个组件触发全局状态改变时，其他组件也跟着改变！！

4.如何来使用vuex？

1. 安装vuex 、模块化安装npm-项目依赖—>npm install vuex --save
2. 创建一个全局状态仓库
3. 引入Vue Vuex模块
4. 使用Vue.use(Vuex)
5. 创建状态仓库对象
6. 导出仓库对象
7. 在main.js中引入并在vue实例注册store
8. 配置设置。。。。
9. 在组件中如何使用

namespaced: true

• 添加命名空间
• 未添加命名空之前：this.$store.commit(‘setMsg’,‘123’) 访问全局的mutations方法setMsg
• 添加命名空之后：this.$store.commit(‘home/setMsg’,‘123’) 访问的是home模块中的mutatio1