Vue3中pinia状态管理库的使用(Composition API 风格)

一. pinia简介

官方文档

Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 如果您熟悉 Composition API,您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中,您也可以从使用 Pinia 中获得很多好处:

  • dev-tools 支持
    • 跟踪动作、突变的时间线
    • Store 出现在使用它们的组件中
    • time travel 和 更容易的调试
  • 热模块更换
    • 在不重新加载页面的情况下修改您的 Store
    • 在开发时保持任何现有状态
  • 插件:使用插件扩展 Pinia 功能
  • 为 JS 用户提供适当的 TypeScript 支持或 autocompletion
  • 服务器端渲染支持

与 Vuex 3.x/4.x 的比较

  • mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成,但这不再是问题。
  • 无需创建自定义复杂包装器来支持 TypeScript,所有内容都是类型化的,并且 API 的设计方式尽可能利用 TS 类型推断。
  • 不再需要注入、导入函数、调用函数、享受自动完成功能!
  • 无需动态添加 Store,默认情况下它们都是动态的,您甚至都不会注意到。请注意,您仍然可以随时手动使用 Store 进行注册,但因为它是自动的,您无需担心。
  • 不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store,但 Pinia 通过设计提供平面结构,同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。
  • 没有 命名空间模块。鉴于 Store 的扁平架构,"命名空间" Store 是其定义方式所固有的,您可以说所有 Store 都是命名空间的。

二. pinia基本使用

2.1 安装pinia

javascript 复制代码
yarn add pinia
# 或者使用 npm
npm install pinia

2.2 vue实例中导入pinia

在main.js中导入createPinia,执行方法得到pinia实例,再将实例添加到app中

javascript 复制代码
import { createPinia } from 'pinia'

const pinia = createPinia()

createApp(App).use(pinia)

2.3 基础实例

创建一个 Store (/stores/counter.js):

javascript 复制代码
// 导入defineStore方法
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {
    // 定义state
    const count = ref(1)

    // 定义修改数据的函数
    const increment = () => {
        count.value++
    }

    // return返回数据
    return { count, increment }
})

在组件中使用Store

javascript 复制代码
<script setup>
import { useCounterStore } from './store/counter';
const counterStore = useCounterStore();

</script>

<template>
 <button @click="counterStore.increment">{{ counterStore.count }}</button>  
</template>

<style scoped></style>

三. getters

Getter 完全等同于 Store 状态的 计算值。 他们接收"状态"作为第一个参数以鼓励箭头函数的使用:

使用computed来定义getter

javascript 复制代码
const doubleCount = computed(() => count.value * 2)

return { doubleCount }

四. action

Actions 相当于组件中的 methods。

javascript 复制代码
const list = ref([])
const getList = async () => {
        const res = await axios.get('http://geek.itheima.net/v1_0/channels')
        list.value = res.data.data.channels
    }
return { list, getList }

组件中使用

javascript 复制代码
 <ul>
  <li v-for="item in counterStore.list" :key="item.id">
    {{ item.name }}
  </li>
 </ul>

五. storeToRefs响应式解构

storeToRefs 是 Pinia 提供的一个工具函数,用于在保持响应式的前提下解构 Store 中的状态和 getters。

javascript 复制代码
const { count, doubleCount } = storeToRefs(counterStore);

<template>
 <button @click="counterStore.increment">{{ count }}</button>  
 {{ doubleCount }}
</template>

可以看到count还是可以回显出来

注意!!! Actions方法不需要响应式,也就是说不需要用storeToRefs解构,直接解就行了

相关推荐
吃饺子不吃馅19 分钟前
Canvas实现协同电影选座
前端·架构·canvas
前端慢慢其修远1 小时前
fabric.js 中originX originY center设置问题
前端·fabric
im_AMBER1 小时前
React 04
前端·react.js·前端框架·1024程序员节
fhsWar2 小时前
Vue3 props: `required: true` 与 vant 的`makeRequiredProp`
前端·javascript·vue.js
泷羽Sec-静安2 小时前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端3 小时前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal4963 小时前
Web Components简介及如何使用
前端·javascript·html
jump6803 小时前
TS中 unknown 和 any 的区别
前端
无羡仙3 小时前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊4 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器