Pinia快速入门

碰磕
103 阅读3分钟

Pinia学习

1.做什么用的❓

  • 与vuex的作用一致，用于做网页存储的
  • Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态

2.优势❓

  • 与vue3、typescript兼容较为友好
  • 上手容易,对开发者友好
  • 状态变更的流程更为简易
  • action可支持同步或者异步
  • 等等...

3. 介绍❓

官网:pinia.web3doc.top/ 它可以用来代替vuex

3.1、与vuex对比

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它 取而代之的是新的建议。

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

Vuex 3.x 是 Vuex 的 Vue 2 而 Vuex 4.x 是 Vue 3 Pinia API 与 Vuex ≤4 有很大不同，即：

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

4.实操使用💪

版本须知

我下边操作基于pinia2.0.30版本 在这里插入图片描述

4.1创建项目

我这里使用vue-cli进行创建使用 Tip:记得安装个vue-cli脚手架,也可以用vite去创建，创建vue项目我就不多说了

vue create 项目名称
cd 项目名称
npm i

根据以上步骤即可创建成功

4.2运行项目

npm run serve

这样即可运行成功,开始使用pinia

4.3使用pinia

安装

npm install pinia

全局引入挂载

在main.js下

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(createPinia()).mount('#app')

使用

在src文件夹下创建文件夹store--->index.js 用于编写pinia的状态共享内容

import { defineStore } from "pinia";

export default defineStore('main',{
    state:()=>{
        return {
            count:10,
            price:99
        }
    },
    //计算属性
    getters:{
        Sumprice:(state)=>{
            console.log('1111',state)
            return state.count*state.price;
        }
    },
    //vuex:只能是异步,pinia表示可同步也可异步
    actions:{
        async getTest(){
            let msg="消息"
            setTimeout(() => {
                msg="最终消息"
                console.log(msg);
                this.count=9999;//通过this.属性名直接赋值...
            }, 1000);
            return msg;
        },
    }
})

下方示例均基于上方pinia的内容进行使用 在使用该模块的公共属性的页面需要先引入上方文件👇

import useMainStore from './store/index.js'
const store=useMainStore();

state

  • 用于创建公共属性,和vuex一致

getters

  • 计算属性，用于监听state的改变

actions

  • 编写同步异步的方法实现动态数据赋值
  • vuex:只能是异步,pinia表示可同步也可异步

示例

<template>
  <div>
    <h1>碰磕Age:{{ store.count }}</h1>
    <h2>{{ count }}</h2>
    <h2>总:{{ store.Sumprice }}</h2>
    <button @click="addCount">+</button>
    <button @click="patchCount">+</button>
    <button @click="pathcFnCount">+</button>
    <button @click="replaceCount">替换state</button>
    <button @click="resetCount">重置</button>

    <button @click="store.getTest()">获取数据</button>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import useMainStore from './store/index.js'
const store=useMainStore();
//方式二解构并且响应式
let {count}=storeToRefs(store);
/**
 * state修改
 */
const addCount=()=>{
  store.count++;
}

/**
 * $patch修改
 * 方便批量修改
 */
const patchCount=()=>{
  store.$patch({
    count:store.count+2
  })
}

/**
 * $patch指定修改哪个属性
 */
const pathcFnCount=()=>{
  store.$patch((state)=>{
    state.count++;
  })
}

/**
 * 将整个state直接替换
 */
const replaceCount=()=>{
  store.$state={
    count:10,
    price:99
  }
}
/**
 * 将整个state重置
 */
 const resetCount=()=>{
  store.$reset();
}

/**
 * 监听整个仓库变化
 */
store.$subscribe((mutation,state)=>{
  console.log("mutation=",mutation,"state=",state)
})
</script>

代码分析

  • 页面中可通过store.属性名直接使用
  • 也可以通过在js中定义属性解构返给页面使用，但想实现响应式必须依赖于storeToRefs
  • 可通过$patch批量修改state的属性，也可以指定修改哪个属性
  • 可通过store.$state将整个state进行替换
  • 通过store.$reset()可实现重置
  • 通过store.$subscribe(()=>{})可实现监听改变

到这里基本就完结了~

avatar
文章
阅读
粉丝