1.用自己最喜欢的方式安装
yarn add pinia# 或者使用 npmnpm install pinia
2.main.js引入
import { createapp } from 'vue'import app from './app.vue' const app=createapp(app)import { createpinia } from 'pinia' //引入piniaapp.use(createpinia()) app.mount('#app')
3.创建store文件并配置内部的index.js文件
import { definestore } from 'pinia' //引入pinia //这里官网是单独导出 是可以写成默认导出的 官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱export const usecar=definestore("test",{ state: () =>{ return ({ msg:"这是pinia", name:"小小", age:18 }) //为了避免出错，返回的值用()包起来 } })
4.组件使用方法
<template> <h2>{{store.msg}}{{store.name}}{{store.age}}</h2> <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>
5.重置store.$reset()
<template> <h2>{{store.msg}}{{store.name}}{{store.age}}</h2> <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>
6.群体修改store.$patch,可以将pinia的数据进行同一修改
特点：批量修改但状态只刷新一次
<template> <h2>{{store.msg}}{{store.name}}{{store.age}}</h2> <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>
7.订阅修改
//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次store.$subscribe((mutation, state) => { // 每当它发生变化时，将整个状态持久化到本地存储 localstorage.setitem('hello', json.stringify(state))})
8.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>
9.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存储库并使用的详细内容。