Vue3使用pinia小demo

pinia是一个状态管理库，类似于之前的vuex。想比于vuex，它的写法更贴近vue3的Composition API

简易使用：

1. 安装：yarn add pinia
2. 在main.js中引用

   import { createApp } from 'vue'
   import App from './App.vue'
   // 创建根储存，并传递给vue
   import { createPinia } from "pinia";
   
   // 
   createApp(App).use(createPinia()).mount('#app')
   

3. 创建src/store/store1.js文件，然后创建store

   import { defineStore } from "pinia";
   
   // 可以拥有多个store
   const useStore = defineStore({
     // 必填，store的唯一标识
     id: 'store1',
     // 数据，返回对象的函数
     state: () => ({
       count: 1
     }),
     // 可以处理store，然后返回
     getters: {
       squareCount: (state) => {
         // 如果需要获取其他getter可以通过this.getName来回去
         return state.count ** 2
       }
     },
     // 在action中操作state。支持异步。不推荐直接修改(可以直接修改state)
     actions: {
       countAdd(num) {
         if (typeof num === 'number') {
           this.count += num;
         } else {
           this.count++;
         }
       },
       countLess() {
         this.count--;
       },
       countAdd5(num) {
         // 调用其他action 通过this
         this.countAdd(num);
       }
     }
   });
   export default useStore;
   

4. 使用和修改state状态

   // 在template中使用 {{store.count}} 来访问state
   // 使用 {{store.squareCount}} 来访问getter
   
   import useStore from "@/store/store1.js";
   export default {
     setup() {
       const store = useStore();
   
       
       const change = ()=>{
           // 调用action来修改store
           store.countAdd();
       }
   
       return { store };
     },
   };