Skip to content

[vue/vite/pinia]在vscode中给vite项目安装pinia状态管理

* pinia是什么?

* Pinia官网:Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态

* 即数据共享。在使用过pinia后,相信你也会对它爱不释手的,下面我们来聊聊如何安装。

安装pinia

  • 来到你的项目文件夹
  • 在vscode的终端中执行:npm i pinia -D

  • 在 /src/modules文件夹下新建文件 pinia.js

  • 写入:
import { createPinia } from  "pinia"

const pinia = createPinia()

export default pinia

修改main.js

  • 增加:
import pinia from "./modules/pinia"
//...
app.use(pinia)
  • 最终main.js文件:

创建stores

  • 在 /src文件夹内新建文件夹stores,用来存放状态管理
  • 这里我们示例创建一个计数管理,counter.js

  • 里面写入:
import { defineStore } from "pinia"

export const useCounterStore = defineStore('counter', {
    state() {
        return {
            num:1
        }
    },
    actions: {
        inc() {
            ++(this.num);
        }
    }
})

使用counter

  • 在你想使用counter的页面中导入并使用,这里以home.vue示例:
<script setup>
import { useCounterStore } from "../stores/counter"

const counter = useCounterStore()
</script>

<template>
    <div>这里是home.vue捏</div>
    <span>{{counter.num}}</span>
    <button @click="counter.inc()">点我</button>
</template>
  • home页面效果:
  • 进入页面后,计数为1
  • 点击按钮时,每点击一次,计数 + 1