[Vue3]Pinia简单上手使用

目录

#Pinia是什么?

#安装

#配置和简单使用

1.从main.js 导入Pinia到项目并使用

 2.创建状态库

3.使用状态库

4.状态库数据的修改

4.状态库数据的还原和监听

---

#Pinia是什么?

Pinia是用来替代Vuex的新一代状态管理库,它可以跨组件共享和管理数据.Pinia 目前已经是 vue 官方正式的状态库 适用于 vue2 和 vue3.同时支持选项式和组合式。

Pinia值得你喜欢的 Vue Storehttps://pinia.vuejs.org/zh/

#安装

npm install pinia

或

yarn add pinia

#配置和简单使用

1.从main.js 导入Pinia到项目并使用

import {createPinia} from 'pinia'  //导入pinia

app.use(createPinia())   //使用pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import {createPinia} from 'pinia'



const app=createApp(App)
app.use(createPinia())
app.mount('#app')

 2.创建状态库

创建index.js(名字随便取)

按照习惯和约定我们将在项目下新建一个store文件夹来存储状态库

 

引入

import { defineStore } from "pinia";

这是一个创建pinia状态库的函数(下面是参数介绍)

defineStore(id, options): StoreDefinition 创建一个检索 store 实例的 useStore 函数。

参数	类型	描述
id	string	状态库名称（这个标识必须是唯一的）
options	Omit, "id">	定义 store 的选项

创建实例并导出

import { defineStore } from "pinia";

export const mainstore= defineStore('main',{
    state:()=>{
        return {
            count:10,
            list:[{
                name:"iphone14",
                price:5888,
                num:1,
            },{
                name:"MetaPro",
                price:7999,
                num:1,
            }]
        }
    },
    getters:{
        sumPrice:(state)=>{
            return state.list.reduce((pre,item)=>{
                return pre+(item.price*item.num)
            },0)
        },
    },
    actions:{
        sayhello(){
            console.log("actions sayhello!")
        }
    }
})

这里新建了一个标识为main的状态库

其中options有这样一些选项

选项	描述
state	存储在此库中的数据
getters	计算state中的值
actions	定义的一些方法（常用于业务逻辑）

3.使用状态库

在需要使用的vue组件中导入刚刚创建状态库即可

import {mainstore} from './store/index'

拿到一个mainstore状态库

4.状态库数据的修改

这里定义了两个方法来修改状态库 第一个是直接修改 第二个通过$ptach修改

4.状态库数据的还原和监听

状态库名.$reset();

将状态库还原到初始状态

状态库名.$subscribe

监听每一次状态库数据的更改