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

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

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

• 快速安装配置pinia

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

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

• 数据持久化操作，避免页面刷新，数据就没了

  • 这里推荐插件  pinia-plugin-persistedstate

  • // 安装依赖 npm install pinia-plugin-persistedstate
     
    // 在挂载pinia到vue前，配置持久化，main.js入口文件中操作
    import { createPinia } from 'pinia';
    // 引入持久化插件
    import { createPersistedState } from 'pinia-plugin-persistedstate';
    const pinia = createPinia();
    pinia.use(createPersistedState({
        serializer: { // 指定参数序列化器
          serialize: JSON.stringify,
          deserialize: JSON.parse,
        }
    }));
    app.use(pinia);// 挂载pinia

     

                                             

  • // 创建一个store文件，对全局属性、方法变量进行管理
    import { defineStore } from "pinia";
     
    //defineStore返回一个函数进行调用，参数一为命名，参数二是对应的配置
    //state 用于变量的存储，getters是计算属性，action是方法集合，同步异步方法均可执行
    export const useStore = defineStore('store', {
      state:()=>({
        count:0,
      }),
      getters:{
        
      },
      actions:{
        increaseCount(){
          this.count++;
        }
      },
      // 持久化配置
      persist: {
        key: 'store',//存储本地的名字
        storage:window.localStorage,//存储地址，可选sessionStorage
        paths:['count'],//需要持久化的变量
      },
    })