pinia初使用

pinia是类似vuex的状态管理，未来将会发展成vuex5.0版本，pinia比vuex简单了很多，去除了mutation，只有state,getters,actions（同步，异步都支持）,用法基本和vuex一样甚至还要更简单，并且支持vue2和vue3；Pinia 对 ts的支持更好，性能更优， 体积更小；

• State： 类似于组件中data，用于存储全局状态
• Getters： 类似于组件中的computed，根据已有的State封装派生数据，也具有缓存的特性
• Actions： 类似于组件中的methods，用于封装业务逻辑，同步异步均可以

首先要下载pinia

npm install pinia

以下是vue3使用pinia的实例

下载完成后要在main.ts文件里导入createPinia，创建pinia实例，再挂载到vue根实例上。

使用state

 要在文件里引入defineStore,使用这个来定义容器，返回值是一个函数，第一个参数是容器名且必须唯一，有点像命名空间，第二个参数就是要定义的一些state，getters，actions，用state来定义全局状态；

定义完后就可以直接在页面模板里使用，要在页面先导入store文件并调用；

state里面的变量也可以使用解构的方式来提取，但是普通的解构不是响应式的，解决方法就是使用storeToRefs来做一个响应式处理，此时js要访问这个变量时要加上 变量.value; 记得要从pinia里引入storeToRefs；

使用actions改变数据

修改数据可以直接在页面的函数里面拿到state的值来修改；如果要修改多个数据建议使用$patch((state) => {...}) 来批量处理，箭头函数里面的参数就是state数据;

 

改变数据也可以在actions里面定义函数来修改，函数里面的this可以拿到state数据从而来进行修改，当然如果要修改多个数据，也可以在actions里面使用$patch来批量修改；

 

getters使用

 getters就是用来定义计算属性，写法和computed一样，他具有缓存的功能，你在页面使用了三次这个计算属性，实际上他只有第一次调用了getters，其他两次都是在缓存里面取数据。

调用getters里面的计算属性

 

 总而言之，pinia使用起来比vuex清爽很多，也会是未来发展趋势。