Vue 3 & Pinia 状态管理（1） - Pinia 快速上手

嗨，我是温新，一名 PHPer

本篇目标：快速上手 Pinia 的使用

Pinia 官方文档：https://pinia.web3doc.top/introduction.html

第一步：创建 Vue 项目 & 安装 Pinia

创建 Vue 3 项目

# vue 3 使用 ts 模板
npm create vite@latest vite-vue3-pinia --template vue-ts

安装 Pinia

npm i pinia

运行项目

cd vite-vue3-pinia

npm install
npm run dev

第二步：Pinia 的使用

步骤一：main.ts 中引入 pinia。

// main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入 pinia
import { createPinia } from 'pinia'

const app = createApp(App)
// 挂载 pinia
app.use(createPinia())
app.mount('#app')

步骤二：创建仓储库文件

// stores 目录不存在，需要自己创建
// src/stores/test.ts

import { defineStore } from 'pinia'
import {ref} from 'vue'

export default defineStore('test', () => {
    const testName = ref('自如初')
    return {testName}
})

步骤三：Vue 中使用仓库数据

<script>
    // src/App.vue

    import useTestStore from "./stores/test.ts"
    const testStore = useTestStore()
</script>

<template>
  <div>
    <h1>{{  testStore.testName }}</h1>
  </div>
</template>

完成后，打开浏览器体验一下吧。