快速上手vue前端存储库、全局状态管理工具pinia

pinia是什么，为什么我们要使用pinia？

• pinia是vue全局状态管理工具，类似vueX，用于全局的数据状态存储、修改变更等等
• 相较于vueX，pinia的使用较为简单，轻量级，上手容易，干掉了vueaX的层层套娃

快速安装配置pinia

• 安装依赖 npm install pinia
• 创建一个store

  // 创建一个store文件，对全局属性、方法变量进行管理
  import { defineStore } from "pinia";
  
  //defineStore返回一个函数进行调用，参数一为命名，即存储在本地的名称，参数二是对应的配置
  //state 用于变量的存储，getters是计算属性，action是方法集合，同步异步方法均可执行
  export const useStore = defineStore('store', {
    state:()=>({
      count:'',
    }),
    getters:{
      
    },
    actions:{
      increaseCount(){
        this.count++;
      }
    }
  })

• 挂载pinia到vue上，vue js入口文件，main.js中操作

  import { createPinia } from 'pinia';
  app.use(createPinia());

如何使用pinia  

//在需要使用的组件中，引入刚才导出的变量 useStore，注意，该变量是defineStore返回的函数
import { useStore } from './store';
const authStore = useStore();
// 使用变量
console.log(authStore.count);
// 调用方法
authStore.increaseCount();