pinia的使用

先使用vite搭建一个vue3的项目

npm init vite

根据需要选择

npm i pinia

main.js中引入

import {createApp} from 'vue'
import App from './App.vue'
import {createPinia} from "pinia"

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

创建一个store/index.js

import {defineStore} from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
    // 推荐使用 完整类型推断的箭头函数
    state: () => {
        return {
            number: 0,
            name: "枫枫",
        };
    },
})

组件中使用

我在App.vue中使用

<template>
<div>
  name：{{ store.name }}
  number: {{ store.number }}
</div>
</template>

<script setup>
import {useStore} from "./store/index.js";

const store = useStore()


</script>

可以看到，state中的数据就显示在页面上了

pinia的使用还是非常简单的