今天小编给大家分享一下Vue3中如何引入Pinia存储库并使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
用自己最喜欢的方式安装
yarn add pinia# 或者使用 npmnpm install piniamain.js引入
import { createApp } from 'vue'import App from './App.vue' const app=createApp(App)import { createPinia } from 'pinia' //引入piniaapp.use(createPinia()) app.mount('#app')创建store文件并配置内部的index.js文件
import { defineStore } from 'pinia' //引入pinia //这里官网是单独导出 是可以写成默认导出的 官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱export const useCar=defineStore("test",{ state: () =>{ return ({ msg:"这是pinia", name:"小小", age:18 }) //为了避免出错，返回的值用()包起来 } })组件使用方法
<template> <h3>{{store.msg}}{{store.name}}{{store.age}}</h3> <button @click="modify">修改store.name</button></template> <script>import { defineComponent, ref } from 'vue';import { reactive, toRefs, onMounted, onActivated} from "vue";import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入export default defineComponent({ let store=useCar() //接收 setup() { const state = reactive({ testMsg: "原始值", }); onMounted(async () => {}); onActivated(() => {}) const methods = { modify(){ store.name = state.testMsg //修改pinia里面的数据 console.log(store.name) } }; return { ...toRefs(state), ...methods, }; }})</script>重置store.$reset()
<template> <h3>{{store.msg}}{{store.name}}{{store.age}}</h3> <button @click="reset">重置store.name</button></template> <script>import { defineComponent, ref } from 'vue';import { reactive, toRefs, onMounted, onActivated} from "vue";import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入export default defineComponent({ let store=useCar() //接收 setup() { const state = reactive({ testMsg: "原始值", }); onMounted(async () => {}); onActivated(() => {}) const methods = { reset(){ store.$reset() //重置pinia里面的数据 console.log(store.name) } }; return { ...toRefs(state), ...methods, }; }})</script>群体修改store.$patch,可以将pinia的数据进行同一修改
特点：批量修改但状态只刷新一次
<template> <h3>{{store.msg}}{{store.name}}{{store.age}}</h3> <button @click="modify">修改store.name</button> <button @click="reset">重置store.name</button> <button @click="allModify">群体修改store.name</button></template> <script>import { defineComponent, ref } from 'vue';import { reactive, toRefs, onMounted, onActivated} from "vue";import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入export default defineComponent({ let store=useCar() //接收 setup() { const state = reactive({ testMsg: "原始值", }); onMounted(async () => {}); onActivated(() => {}) const methods = { modify(){ store.name = state.testMsg //修改pinia里面的数据 console.log(store.name) }, reset(){ store.$reset() //重置pinia里面的数据 console.log(store.name) }, allModify(){ store.$patch({ name:"花花", age:20, }) } }; return { ...toRefs(state), ...methods, }; }})</script>订阅修改
//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次store.$subscribe((mutation, state) => { // 每当它发生变化时，将整个状态持久化到本地存储 localStorage.setItem('hello', JSON.stringify(state))})Getter
Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用：(ps:虽然鼓励但是依然提供了非es6玩家的使用方式 内部可以用this代表state)
//store/index.js文件export const useStore = defineStore('main', { state: () => ({ counter: 0, }), getters: { doubleCount: (state) => state.counter * 2, },}) //组件中直接使用: <p>Double count is {{ store.doubleCount }}</p>Actions
在pinia中没有提供mutaion 因为Actions就够了(它可以异步同步的统一修改状态)之所以提供这个功能 就是为了项目中的公共修改状态的业务统一
export const useStore = defineStore('main', { state: () => ({ counter: 0, }), actions: { increment() { this.counter++//1.有this }, randomizeCounter(state) {//2.有参数 想用哪个用哪个 state.counter = Math.round(100 * Math.random()) }, randomizeCounter(state) { //异步函数.接口成功赋值 ajax.hplBaseApi("app/productSelection/categoryRows", {}, "post").then((res) => { state.counter = res.data.length }); } },}) //组件中的使用: setup() { const store = useStore() store.increment() store.randomizeCounter() }以上就是“Vue3中如何引入Pinia存储库并使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
