【Vue3 入门到实战】11. Pinia 状态管理

最新推荐文章于 2025-06-20 08:02:51 发布

原创

最新推荐文章于 2025-06-20 08:02:51 发布 · 986 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #typescript

Pinia 是一个用于 Vue 3 的状态管理库,类似于 vue2 中的 vuex，

Pinia 不像 Vuex 那样有严格的规则（如必须使用 mutations 来修改状态），这使得代码更加灵活。

1. 搭建 Pinia 环境

1.1 准备一个效果

Sum.vue 组件

<template>
    <div class="sum">
        <h2>当前求和为{
  { sum }}</h2>
        <div class="btn">
            <select v-model.number="n">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <button @click="add">加</button>
            <button @click="subtract">减</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let sum = ref(0);
let n = ref(1);

function add() {
    sum.value += n.value;
}

function subtract() {
    sum.value -= n.value;
}
</script>

<style>
.sum {
    width: 400px;
    height: 100px;
    background: skyblue;
    border-radius: 10px;
    padding: 10px;
}
.btn {
    display: flex;
    gap: 20px;
}
</style>

LoveTalk 组件

<template>
    <div class="love-talk">
        <button @click="getTalk">获取一句土味情话</button>

        <ul>
            <li v-for="item in list" :key="item.id">
                {
  {item.content}}
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import  axios  from 'axios'
import  { nanoid }  from 'nanoid'
import { useTalkStore} from '@/store/talk'

let talkStore = useTalkStore()
let list = ref([
    {
        id:1,
        content:'今天你有点怪，哪里怪？怪好看的'
    },
    {
        id:2,
        content:'草莓、蓝莓、蔓越莓，今天想我了没'
    },
    {
        id:3,
        content:'心里给你留了一块地，我的死心踏地'
    },
])

async function getTalk() {
    let result = await axios.get('https://api.uomg.com/api/rand.qinghua')
    
   let obj = {
    id:nanoid(),
    content:result.data.content
   }

   list.value.unshift(obj);
   console.log(list.value)
}
</script>

<style>
.love-talk{
 width: 500px;
 height: auto;
 padding: 20px;
 background-color: salmon;
 border-radius: 10px;
 box-shadow: 0 0 10px rgba(0,0,0,.1);
 margin-top: 30px;
}
</style>

App.vue 组件

<template>
  <div class="app">
    <h2 class="title">pinia测试效果</h2>
    <Sum />
    <LoveTalk />
  </div>
</template>

<script lang="ts" setup name="App">
import Sum from '@/components/Sum.vue'
import LoveTalk from './components/LoveTalk.vue';
</script>

1.2 搭建 pinia

下载pinia

npm install pinia

main.ts 注册pinia

 import { createApp } from 'vue'
 import App from './App.vue'
//  引入createPinia，用于创建 pinia
 import { createPinia } from 'pinia';

 // 创建pinia
 const pinia = createPinia();
 const app = createApp(App);
 // 将pinia挂载到app上
 app.use(pinia)
 app.mount('#app')

此时开发者工具上已经有了 pinia 选项 ↓ ↓ ↓