Vue3状态管理之Pinia怎么使用

这篇文章主要介绍"Vue3状态管理之Pinia怎么使用"，在日常操作中，相信很多人在Vue3状态管理之Pinia怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Vue3状态管理之Pinia怎么使用"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

Vue3 新的发展方向（来源于尤大知乎）

Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本

基于 Vite 的极速构建工具链

2.2 state 中数据的解构访问

状态管理中

// store/index.tsstate:()=>{        return {            info:"pinia 可以使用",            count:10        }    },

组件中

2.3 state 中数据的修改方式（actions和组件中）

一般的修改

const alertData = () => {  // 方式一：最简单的方法，如下  // 解构后更改方式  // count.value += 10  // 结构前更改方式  // mainStore.count += 10  // 方式二：若要同时修改多个数据，建议使用$patch来实现批量更新，在内部做了优化  // mainStore.$patch({  //   count: mainStore.count + 1,  //   info: "hello"  // })  // 方式三：更好的批量更新方法，通过$patch传递一个函数来实现，这里的state就是useMainStore容器中的state  mainStore.$patch(state => {    state.count += 10    state.info = "pinia批量更新"  })}

通过actions修改

// store/index.ts// 类似于vue2组件的methods，用于封装业务逻辑，修改state// // 注意：不能使用箭头函数来定义actions，因为箭头函数绑定外部的this    actions:{        changeState (){            this.count += 10            this.info = "actions修改数据"        },        changeStates (num:number){            this.count += num + 2            this.info = "actions修改数据"        }    }

const alertData = () => {  // 方式一：最简单的方法，如下  // 解构后更改方式  // count.value += 10  // 结构前更改方式  // mainStore.count += 10  // 方式二：若要同时修改多个数据，建议使用$patch来实现批量更新，在内部做了优化  // mainStore.$patch({  //   count: mainStore.count + 1,  //   info: "hello"  // })  // 方式三：更好的批量更新方法，通过$patch传递一个函数来实现，这里的state就是useMainStore容器中的state  // mainStore.$patch(state => {  //   state.count += 10  //   state.info = "pinia批量更新"  // })  // 方式四：通过 actions 来修改数据  mainStore.changeState()  mainStore.changeStates(10)}

2.4 getters 的使用

定义

// 类似于组件的computed，用来封装计算属性，具有缓存的功能    getters:{             // 函数接收一个可选参数：state状态对象        count10(state){            return state.count += 10        },        count10(state){            return this.count += 10        },        // 若使用this.count，则必须指明返回数据的类型        count11():number{            return this.count += 11        }    },

使用

{{ mainStore.count10 }}

三、Pinia 数据持久化

保存至localStorage中

import { defineStore } from 'pinia';const useLoginStore = defineStore({  id: 'login',  //   state: () => ({  //     num: 1,  //   }),  state: () => ({    info: 'pinia 可以使用',  }),  getters: {},  actions: {    alertInfo() {      this.info = '可以可以，这个秒';    },  },});// 数据持久化// 1. 保存数据const instance = useLoginStore();instance.$subscribe((_, state) => {  localStorage.setItem('login-store', JSON.stringify({ ...state }));});// 2. 获取保存的数据，先判断有无，无则用先前的const old = localStorage.getItem('login-store');if (old) {  instance.$state = JSON.parse(old);}export default useLoginStore;

使用 插件 pinia-plugin-persist 可以辅助实现数据持久化功能

# 安装插件pnpm install pinia-plugin-persist --save

// main.ts文件中import { createPinia } from 'pinia';import { createApp } from 'vue';import App from './App.vue';import router from './router';import piniaPluginPersist from 'pinia-plugin-persist';const pinia = createPinia();pinia.use(piniaPluginPersist);const app = createApp(App);app.use(router);app.use(pinia);app.mount('#app');

// 接着在对应的 store 里开启 persist 即可。数据默认存在 sessionStorage 里，并且会以 store 的 id 作为 key。import { defineStore } from 'pinia';import piniaPluginPersist from 'pinia-plugin-persist';const useLoginStore = defineStore({  id: 'login',  //   state: () => ({  //     num: 1,  //   }),  state: () => ({    info: 'pinia 可以使用',  }),  // 开启数据缓存  persist: {    enabled: true,  },  getters: {},  actions: {    alertInfo() {      this.info = '可以可以，这个秒';    },  },});export default useLoginStore;

其它设置，自定义保存名称，保存位置和需要保存的数据

// 开启数据缓存  persist: {    enabled: true,    strategies: [      {        // 自定义名称        key: 'login_store',        // 保存位置，默认保存在sessionStorage        storage: localStorage,        // 指定要持久化的数据，默认所有 state 都会进行缓存，你可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。        paths: ['age'],      },    ],  },

到此，关于"Vue3状态管理之Pinia怎么使用"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！