快速上手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'],//需要持久化的变量

  },

})

巴特西

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

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

快速安装配置pinia

如何使用pinia

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

最新文章

热门文章