vue全家桶 --- pinia状态管理

目录：

1、Pinia和Vuex的对比

2、创建Pinia的Store

3、Pinia核心概念State

4、Pinia核心概念Getters

5、Pinia核心概念Actions

一、Pinia和Vuex的对比

 

二、创建Pinia的Store

 1、如何使用：

（1）、安装pinia：

（2）、在src文件夹下创建stores文件夹，里面创建入口文件index.js：

（3）、在入口文件里面写入代码（之后就不用动这个入口文件了，此应用程序就已经在使用pinia了）：

（4）、在main.js里面使用pinia：

（5）、开始在stores里面创建文件来管理的需要被管理的内容：

 第一个参数是id，也就是名字。这个文件返回的是一个函数。这个返回的名字必须是 usexxx这样子的（xxx是id，也就是名字），否则是不规范的命名。

（6）、在组件中使用：

先import引入，然后取个名字，在template里面调用，从此再也不需要用到.state、.getters、.actions 了，直接  .需要的变量或方法。 

2、下图要注意解构赋值的方法会让响应式变成非响应式的，有两种方法让其变成响应式的：

3、在pinia里面，就是允许开发人员使用下图的方法来改变state里面的变量（在vuex里面是也可以这样做，但是不好，devtool检测不到）：

4、已经在用vue3的pinia了，就不要在使用mapState了（为了兼容options api所以pinia里面还是有这个东西的）。

三、Pinia核心概念State

1、获取多个state的变量：

 2、操作state：

 

（1）普通的修改state的值（一次改一个的方法）：

 

 （2）重置state的值(恢复最初的值，使用$reset)：

 （3）一次性修改多个state变量（使用$patch）：

（4）替换state（很少用，一般不会去用）：

会替换原来的state内容，把你js里面写的新的对象赋值给state

四、Pinia核心概念Getters

 

 

 

 

1、基本使用（获取state里面的变量）

2、在getters里面的函数获取里面的另外一个函数来组合

3、传入参数的方法

返回一个带参数的函数

4、从其他store里面获取state的值然后使用：

 

五、Pinia核心概念Actions

 1、actions的函数方法括号里面的内容是参数，就是调用actions函数时候可以用有参的方法，但是括号里面不能像vuex一样获取不到state，在函数方法里面只要用  this.state的变量 就可以拿到。

 

2、执行异步操作（网络请求）：

 

 （1）在需要使用网络请求的组件里面使用pinia的某个状态管理：

 

 

 （2）在stores的代码：

 

 （3）如果actions中用promise的网络请求函数有return 或 resolve（）的话，调用actions的组件是可以监听return或resolve（）结果的：

需要在组件调用的地方加上.then（res = >{ res }）

 

写法一： 

写法二：（推荐使用这种方法来返回结果）

下图的async的函数的return 的内容就相当于写了resolve（“ 内容 ”） 

上图的写法相当于：

 

六、订阅 plugins