vue学习笔记四

一 pinia

1 介绍

Pinia是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态

1.1 安装pinia

先打开终端安装,输入：

npm i pinia 

1.2 搭建pinia环境

找到main.ts文件，在里面完成基础搭建

// 第一步：引入pinia
import { createPinia } from 'pinia'

const app = createApp(App)

// 第二步：创建pinia
const pinia = createPinia()

// 第三步：安装pinia
app.use(pinia)
app.mount('#app')

二 储存与读取数据

2 存储

第一步在src文件夹下创建名为store文件夹
第二步store文件夹中创建一个count.ts文件，count.ts文件相当于是仓库
第三步进行配置

2.1 配置

import { defineStore } from 'pinia'

export const useCountStore = defineStore('count',{
  // 真正存储数据的地方
  state(){
    return {
     //这里写存储数据
    }
  }
})

2.2 读取数据

先在代码中引入，找到script

import { useCountStore } from '@/store/count'

接下来写

const countStore = useCountStore()