Vuex4.x（一）初识vue3的状态管理-state

vuex 4.0

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态的方式，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

两种使用方法：

• 第一种使用方式，就是按照官方的说法，只处理状态，不管其他的功能。

• 第二种使用方式，就是从代码的角度来看，完全可以当作大号data来使用。当然这种做法容易被喷，至于好不好，谁用谁清楚。

官网图片

https://next.vuex.vuejs.org/
官方给了两个流程图，一个简单的，我们就不看了。
还有一个复杂一点的，如下图：

000vuex流程.png

研究了好久，总算是了解了一点。并且尝试翻译了一下。

翻译图片

vuex通讯.png

应该没有翻译错吧。

• 后端API，
  不太理解，为啥设置了可以直接访问后端的方法，前端的状态和后端有啥关系呢？目前能想到的就只有登录状态了。

组件问vuex，用户登录了没？vuex就只能问后端。
等等，不是应该在前端缓存一个登录状态吗？
用户在登录页面完成登录后，后端会返回一个token，然后缓存在前端，以后其他地方问是否登录，直接看这个token不就可以了吗？为啥还有问后端要数据？

如果不需要的话，我就想不出来还有啥状态关系到后端API了。

所以另一个理解就是，vuex其实是支持直接从后端获取数据，然后存入state的，也就是说可以把state当作大号data来看待。

• 流程

1. 组件发起一个申请，要获得一个状态。
2. action收到申请后，可以去后端询问，然后通过 commit（mutations） 把需要的状态写入 state 里面，这是可以通过浏览器插件看到 state 的数据。
3. 最后通过 getters 返回给组件。

我在这个流程里面加上了一个前端存储的功能，也就是说可以把 state 存在前端，这样刷新、关掉浏览器、关机重启等情况，state 的数据都不会丢失了。便于恢复状态。

state 的类型

我们先来定义一个简单的state，看看在vue3里面有什么变化。

 state: {
    count: 0,
    myObject: {
      time: '现在的时间'
    }
  }

一个简单类型（number）的count，还有一个引用类型的myObject。

我们打印出来看看效果：

      const store = useStore()
      // 看看state的类型
      console.log('state：', store.state)
      console.log('state.count：', store.state.count)
      console.log('state.myObject：', store.state.myObject)

001state的类型.png

• state
  整个state变成了reactive的形式，看来在vue3里面，vuex直接采用reactive来实现state的响应性。

• state里的简单类型
  简单类型没有啥变化，没有变成ref的形式，所以直接使用简单类型的话，还是需要以前的方式。

• state 里面的引用类型
  直接查看 state 的时候，里面的对象还是普通对象，但是当单独看的时候就变成了 reactive 的形式。
  这是啥时候变的？想不出来。

• state 的数据能不能用 reactive？
  尝试了一下，可以用，不会报错，也会正常运行，但是由于 vuex 可以自动把普通对象变成 reactive 的形式了，那么我们再自己加上就没啥意义了。

• state 的数据能不能用 ref ？
  这个也尝试了一下，可以用，但是有点小变化。
  如果是简单类型的 ref，ref 会失效、消失，直接变成普通的简单类型。
  如果是对象类型的 ref，会变成 reactive 的形式。
  所以用 ref 也是没啥意义。

未完待续。。。

在线演示：

https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex/

源码：

https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-vuex