Vue新一代状态管理工具Pinia的具体使用

目录
  • 前言
    • 优点
  • 安装
  • 创建并挂载
  • 创建store
  • 使用store
    • 回显与修改state
    • 使用$patch对多条数据直接修改
  • 使用actions
  • 使用getters
  • 多个store相互调用
  • 数据持久化
    • 安装
    • 使用
  • 总结

前言

Pinia是尤雨溪强烈推荐的一款Vue状态管理工具,也被认为是下一代Vuex的替代产品。

优点

  • 去除了mutations,只有 state,getters和actions,其中actions支持了同步和异步操作
  • 不会像Vuex那样有模块嵌套,Pinia只有store的概念,store之间可以相互使用,互不影响,达到模块扁平化的效果
  • 更好地支持ts
  • 更好地支持Vue2/Vue3
  • 逻辑更加清晰,开发起来更加简单

安装

npm i pinia

创建并挂载

1.在src目录下新建store目录并在其下面创建index.js文件,代码如下:

import { createPinia } from 'pinia'
const store = createPinia()
export default store

2.在main.js中引入store并挂载,代码如下:

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'

createApp(App)
.use(store)
.mount('#app')

创建store

在src/store文件夹下创建一个js文件,命名按照需求即可,我这边定义为main.js,代码如下:

import { defineStore } from 'pinia'
export const mainStore = defineStore('main', {
    state: () => {
        return {
            msg: 'hello',
            count: 1
        }
    },
    actions: {},
    getters: {}
})

其中defineStore的第一个参数为该store的名称,第二个参数为一个对象,包含了该store的state,getters和actions,state改为了函数形式,目的应该是像Vue2 options API中的data类似,避免多个store中定义的属性相互受到影响。

使用store

此处使用Vue3的SFC语法,主要是Pinia更适合Vue3这种组合式API风格,方便演示

回显与修改state

<script lang="ts" setup>
    import { mainStore } from '../store/main'
    import { storeToRefs } from 'pinia'

    const store = mainStore()
    const { count } = storeToRefs(store)

    // 单条数据直接修改
    const handleAddCount = () => {
        store.count++
    }
</script>

<template>
    <div>
        <p>{{ store.msg }}</p>
        <p>{{ count }}</p>
        <button @click="handleAddCount">+</button>
    </div>
</template>
  • 使用方法与Vuex基本类似,要使用哪个store,就直接进行引入,非常方便,没那么多层级引用
  • 其中,我们使用了Pinia中的storeToRefs方法,此方法能够直接解构出该store的state中的某个值,并且是响应式的;如果我们直接从state上解构,那么解构出的值就不是响应式的了。
  • 如果我们要修改state中的值,不能直接去修改解构出的值,得去修改state上对应的属性

使用$patch对多条数据直接修改

使用$patch的方式对数据进行修改,可以加快修改速度,性能更好。$patch 方法可以接受两种类型的参数,对象型和回调函数型。

$patch + 对象

$patch + 函数  注:使用回调函数型时,回调接收一个state参数,state指代的就是对应store中的state

使用方式如下:

<script lang="ts" setup>
    import { mainStore } from '../store/main'
    import { storeToRefs } from 'pinia'

    const store = mainStore()
    const { count } = storeToRefs(store)

    // 使用$patch + 对象
    const updateWithObj = () => {
        store.$patch({
            msg: store.msg === 'hello' ? 'hello world' : 'hello',
            count: store.count + 2
        })
    }
    // 使用$patch + 回调
    const updateWithFun = () => {
        store.$patch((state) => {
            state.msg = state.msg === 'hello' ? 'hello world' : 'hello'
            state.count = state.count + 3
        })
    }
</script>

<template>
    <div>
        <p>{{ store.msg }}</p>
        <p>{{ count }}</p>
        <button @click="updateWithObj">$patch+对象</button>
        <button @click="updateWithFun">$patch+回调</button>
    </div>
</template>

使用actions

1.在src/store/main.js的actions对象中,添加一个方法,代码如下:

import { defineStore } from 'pinia'
export const mainStore = defineStore('main', {
    state: () => {
        return {
            msg: 'hello',
            count: 1
        }
    },
    actions: {
        changeState() {
            this.count++
            this.msg = this.msg === 'hello' ? 'hello world' : 'hello'
        }
    },
    getters: {}
})

2.使用方式为:store.方法名,代码如下:

<script lang="ts" setup>
    import { mainStore } from '../store/main'
    import { storeToRefs } from 'pinia'

    const store = mainStore()
    const { count } = storeToRefs(store)

   // 使用action修改数据
    const onActionClick = () => {
        store.changeState()
    }
</script>

<template>
    <div>
        <p>{{ store.msg }}</p>
        <p>{{ count }}</p>
        <button @click="onActionClick">使用action</button>
    </div>
</template>

使用getters

Pinia中的getter和Vue中的计算属性类似,在获取state之前会进行处理,具有缓存性,如果值没有改变,即使多次调用,实际上也只会调用一次。

1.在src/store/main.js的getters对象中进行添加,代码如下:

import { defineStore } from 'pinia'
export const mainStore = defineStore('main', {
    state: () => {
        return {
            msg: 'hello',
            count: 1
        }
    },
    getters: {
        getState(state) {
            console.log('getState被调用了');

            // getter 中不仅可以传递state直接改变数据,也可以使用this来改变数据
            return `${state.msg} + ${this.count}`
        }
    }
})

2.使用方式如下:

<script lang="ts" setup>
    import { mainStore } from '../store/main'
    const store = mainStore()
</script>

<template>
    <div>
        <p>使用getter获取数据:{{ store.getState }}</p>
        <p>使用getter获取数据:{{ store.getState }}</p>
        <p>使用getter获取数据:{{ store.getState }}</p>
    </div>
</template>

我们可以看到,即使执行了三遍一样的代码,但最终还是只调用了一次。

多个store相互调用

在Pinia中,可以在一个store中import引入另外一个store,然后通过调用引入的store方法的形式,获取引入的store的状态。

1.在src/store目录下,新建一个文件.js,代码如下:

import { defineStore } from 'pinia'

export const userStore = defineStore('user', {
    state: () => {
        return {
            name: '吴同学'
        }
    }
})

2.在需要用到的store中进行引入,并通过getters的方式获取,代码如下:

import { defineStore } from 'pinia'
import { userStore } from './user'

export const mainStore = defineStore('main', {
    getters: {
        getUserState() {
            return userStore().name
        }
    }
})

数据持久化

Pinia与Vuex一样,刷新页面后,数据就会重置,有时候我们需要将数据进行持久化存储,我们可以使用pinia-plugin-persist这个插件

安装

npm i pinia-plugin-persist --save

使用

1.在src/store/index.js文件夹下,引入并使用,代码如下:

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store

2.在对应的store里开启持久化存储

import { defineStore } from 'pinia'
import { userStore } from './user'

export const mainStore = defineStore('main', {
    state: () => {
        return {
            msg: 'hello',
            count: 1
        }
    },

    // 开启数据缓存
    persist: {
        enabled: true
    }
})

更新数据以后,我们就能在浏览器控制台中看到已经将数据存储到了sessionStorage中

数据默认是存在sessionStorage中的,还会以store的名称作为key。但是我们可以对其修改,并且还可以只持久化部分state中的属性,代码如下:

import { defineStore } from 'pinia'
import { userStore } from './user'

export const mainStore = defineStore('main', {
    state: () => {
        return {
            msg: 'hello',
            count: 1
        }
    },

    // 开启数据缓存
    persist: {
        enabled: true,
        strategies: [
            {
              key: 'mainStore', // 修改存在缓存中的key值
              storage: localStorage,    // 修改存储方式为localStorage
              paths:['msg']  // 只持久化msg,此时刷新页面msg数据会被保留,其他state将会重置
            }
        ]
    }
})

总结

Pinia就是Vuex的替代产品,相比于Vuex,Pinia更好地兼容了Vue本身,代码更加简洁,开发起来也更加便捷。以上就是关于Pinia的介绍,如果觉得对你有帮助,就请点个赞,谢谢大家!

到此这篇关于Vue新一代状态管理工具Pinia的具体使用的文章就介绍到这了,更多相关Vue状态管理工具Pinia内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3搭配pinia的踩坑实战记录

    目录 前言 An Object could not be cloned? VUE 3的toRaw PINIA与VUE 3可以混合搭配? 同样的操作在VUE 3下的结果 最后的解决方式 总结 前言 最近接手了一个新项目,用的是VUE3+pinia的组合.由于之前没有用过这2个库,只能现学现做.幸运的是这两者的上手难度都不大,项目可以正常开发.但这其中也遇到了一些坑,今天就来讲其中我印象最深的一个. An Object could not be cloned? 不知道有多少开发者遇到过这个报错——A

  • vue3中vuex与pinia的踩坑笔记记录

    目录 介绍 安装使用 简单对比写法差异与共同点 Vuex 和 Pinia 的优缺点 何时使用Pinia,何时使用Vuex 总结 介绍 Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎.它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库. Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性.存储模块组织.状态变化分组.多存储创建等). 另一方面,Vuex也是为Vue框架建立的一个流行的状态管理库,它也是Vue核心团队推荐的状态管理库.Vuex高度关注应

  • vue中使用 pinia 全局状态管理的实现

    目录 与vuex的区别 安装 引入pinia 创建状态目录 pinia模块组成 创建pinia模块 在组件中使用该状态机 pinia模块实例中的api讲解 状态持久化 与vuex的区别 去除了 mutation 选项.省去了复杂的disptach和commit流程,直接通过模块实例调用实例的actions中的方法即可触发对应action:在组件中直接可以通过模块实例的$patch修改store状态或者通过action来间接修改store状态.响应式数据原理是proxy,使得数据的增加或者删除字段

  • 还在用vuex?来了解一下pinia

    目录 1.什么是pinia 2.优势 3.使用(非常简单) 总结 1. 什么是pinia 通俗的讲 : ① vuex精简版 ,而且vue官方更加推荐使用. ②优势又完胜于vuex ,下面我们来了解下pinia. 2.优势 pina vuex pinia 同时支持vue2和vue3 vue2要用vuex 3 版本vue3要用vuex 4 版本 不分同步异步,更好的ts支持 分同步异步,不太兼容ts 享受自动补全… 需要注入,导入函数,调用他们… 3. 使用 (非常简单) ① 安装 npm inst

  • Vue状态管理之使用Pinia代替Vuex

    目录 1.Pinia是什么 2.Pinia简单上手 3.使用体验 1.Pinia是什么 Pinia是一个vue的状态管理方案,是vuex团队成员开发,实现了很多vuex5的提案,更加地轻量化且有devtools的支持 vuex4一直被人诟病对于typescript的支持不良好,vuex5也迟迟未来 所以有了pinia的出现 相较于vuex: pinia无需创建复杂的包装器来支持typescript,对于typescript类型判断是天然支持的,享受ide带来的自动补全,减少开发的心智负担,减少v

  • Vue新的状态管理库Pinia入门教程

    目录 前沿 使用教程 1.安装 2.vue中引入 3.基本使用 4.也可以像vuex一样使用 为什么最近Pinia会火起来呢,主要在于Vue3推出来的时候,Vuex对于Vue3的组合式Api支持的不是特别好,也就是在这个时候Pinia出现了. 前沿 Vue官方推荐的状态管理库是Vuex,那为什么最近Pinia会火起来呢,主要在于Vue3推出来的时候,Vuex对于Vue3的组合式Api支持的不是特别好,也就是在这个时候Pinia出现了,最重要的是,Pinia不但支持Vue3,同时还支持Vue2,这

  • Vue3状态管理之Pinia的入门使用教程

    目录 Vue3 新的发展方向(来源于尤大知乎) 一.Pinia 简介与基础 1.1 Pinia 简介 1.2 Pinia 基础 二.Pinia 在Vue3-Vite中的使用 2.1 基础使用流程 2.2 state 中数据的解构访问 2.3 state 中数据的修改方式(actions和组件中) 2.4 getters 的使用 三.Pinia 数据持久化 总结 Vue3 新的发展方向(来源于尤大知乎) Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本 基于 Vite 的极速构建工

  • Vue生态的新成员Pinia的详细介绍

    目录 安装和配置 Store核心 State Getters Actions Vue Devtools 最后 结论 参考文献 Pinia是Vue应用程序的状态管理方案,是Vuex核心团队成员开发.感觉更像是常规的旧 javascript 导入模块,实现了很多Vuex5的提案. Pinia同时支持Vue2和Vue3,不过下面展示的例子都是使用Vue3,Pinia的版本是Pinia@2.0.9. Vue2和Vue3使用的Pinia版本有一点不同,因此请查看官方Pinia 文档以获取更多信息. 安装和

  • Vue新一代状态管理工具Pinia的具体使用

    目录 前言 优点 安装 创建并挂载 创建store 使用store 回显与修改state 使用$patch对多条数据直接修改 使用actions 使用getters 多个store相互调用 数据持久化 安装 使用 总结 前言 Pinia是尤雨溪强烈推荐的一款Vue状态管理工具,也被认为是下一代Vuex的替代产品. 优点 去除了mutations,只有 state,getters和actions,其中actions支持了同步和异步操作 不会像Vuex那样有模块嵌套,Pinia只有store的概念,

  • Vue项目新一代状态管理工具Pinia的使用教程

    目录 前言 Pinia与Vuex的区别 使用Pinia 直接修改数据的两种方式 使用actions修改数据 重置state中数据 Pinia持久化存储 Pinia模块化实现 Pinia中store之间互相调用 总结 前言 Pinia官网介绍说:Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态.Vuex同样可以作为状态管理工具,那么两者有什么区别呢? Pinia与Vuex的区别 pinia只有store.getter.actions,么有mutations,简化了状态管理的操作 pi

  • Vue.js状态管理之Pinia与Vuex详解

    目录 前言 Pinia 和 Vuex 简介 什么是Pinia? 什么是 Vuex? Pinia 的特点 模块化设计 完整的开发工具支持 Pinia 很直观 Pinia 是可扩展的 TypeScript 支持 Pinia 轻量的 Vuex的特点 模块 开发工具支持 热重载 TypeScript 支持 Pinia和Vuex的代码对比 Pinia 和 Vuex 的优缺点 Pinia 的优点 Pinia 的缺点 Vuex 的优点 Vuex 的缺点 我应该使用哪个:Pinia 还是 Vuex? 结论 前言

  • Vue状态管理库Pinia详细介绍

    目录 什么是 Pinia 如何使用 Pinia 认识 Store 定义一个store 使用 store 操作 State Getters 1. 认识和定义 Getters 2. 访问 Getters 认识和定义 Action 什么是 Pinia Pinia (西班牙语中的菠萝),本质上依然是一个状态管理的库,用于跨组件.页面进行状态共享. pinia 与 vuex 的区别: 更友好的TypeScript支持,Vuex之前对TS的支持很不友好 与 Vuex 相比,Pinia 提供了一个更简单的 A

  • Vue3新状态管理工具实例详解

    目录 前言 安装 创建Store State 定义State 获取state 修改state Getters Actions 异步action action间相互调用 数据持久化 安装 使用 自定义key 持久化部分state 最后 前言 Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇. Pinia.js 有如下特点: 完整的 typescript 的支持: 足够轻量,压

  • Vue的状态管理vuex使用方法详解

    引入vuex 当访问数据对象时,一个 Vue 实例只是简单的代理访问.所以,如果有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享 const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth }) 现在当 sourceOfTruth 发生变化,vmA 和 vmB 都将自动的更新引用它们的视图.子组件们的每个实例也会

  • Vue.js 状态管理及 SSR解析

    目录 前端状态管理出现的意义及解决的问题 Vuex 源码解读 Vuex 公共方法 Vuex 介绍及深入使用 Vuex 使用(官网) 1.基本框架 2.基本使用 3.State 3.1 mapState 辅助函数 4.Getter 4.1 通过属性访问 4.2 通过方法访问 4.3 mapGetters 辅助函数 5.Mutation 5.1 提交载荷(Payload) 5.2 使用常量替代 Mutation 事件类型 5.3 Mutation 必须是同步函数 5.4 在组件中提交 Mutatio

  • React 状态管理工具优劣势示例分析

    目录 什么是状态管理? React 状态管理方案 方案介绍 方案对比 Source 相关建议 什么是状态管理? “状态”是描述应用程序当前行为的任何数据.这可能包括诸如“从服务器获取的对象列表”.“当前选择的项目”.“当前登录用户的名称”和“此模式是否打开?”等值. 众所周知,我们在研发一个复杂应用的过程中,一套好的状态管理方案是必不可少的,既能提升研发效率,又能降低研发维护成本,那么状态管理方案那么多,它们有什么不同,我们又该如何选择适合当前应用的方案呢? 本期将主要就 react 的常用状态

随机推荐