VUE新一代状态管理插件Pinia

Pinia意为菠萝，表示与菠萝一样，由很多小块组成。在pinia中，每个store都是单独存在，一同进行状态管理。
很多人也将pinia称为vuex5，因为pinia将作为vue3推荐的状态管理库，而vuex将不再迭代。
pinia它和vuex有很多相似的地方。本质上他是vuex团队核心成员开发的，在vuex上面提出了一些改进。与vuex相比，pinia去除了vuex中对于同步函数Mutations和异步函数Actions的区分。直接在Actions中便能够使用同步和异步方法（在vuex的开发计划中也将会除去同步和异步的区分）。其次相比于vuex，pinia对于typescript的支持性更好，友好的devTools支持，pinia只有1kb，简化了很多方法的写法。由于vuex比较完善，因此,pinia更加适合小型项目，vuex更加适合大型项目。
Pinia 的优点
简便，存储和组件变得很类似，你可以轻松写出优雅的存储。
类型安全，通过类型推断，可以提供自动完成的功能。
vue devtools 支持，可以方便进行调试。
Pinia 支持扩展，可以非常方便地通过本地存储，事物等进行扩展。
模块化设计，通过构建多个存储模块，可以让程序自动拆分它们。
非常轻巧，只有大约 1kb 的大小。
服务器端渲染支持。

用例：
1、基本配置和使用

//利用vue-cli创建一个pinia项目（这里选择创建vue3项目）
vue create pinia
//在项目中安装pinia
npm install pinia@next

2、项目中导入pinia

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
//需要注意的是从pinia中结构出来的createPinia是一个函数,挂载需要先调用执行
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

3、配置状态管理专用文件，在根目录下创建一个store文件，并新建一个index.js文件

import {defineStore} from 'pinia';
export  const userTestStore = defineStore({//需要注意的是，defineStore返回的是一个回调方法
    id:'test',//test是该状态管理的唯一标志也可以使用defineStore(id,{});的形式
    state(){
     return {
         name:'hello pinia',
         age:20
     }       
    },
    getters:{
        testGetters(){
            return this.name+'...';//直接利用this便能够获取到里面的内容不需要使用state中间对象
        } 
    },
    actions:()=>{
        addAge:function(){
                setInterval(()=>{
                this.age++;
            },1000)
        }
    }
})