简单聊聊pinia

和vuex一样，集中状态管理库，用于存储数据和进行跨组件间通信，（redux vuex），写法类似hooks。对比之前的vuex更加支持typescript，没有了mutation这个钩子。

基本使用方法教程

1.首先安装 pinia的包

npm install pinia
yarn add pinia

2.在脚手架里面创建一个store文件夹在文件夹下创建一个index.js 以下是index.js的内容

import { createPinia } from 'pinia' 
const pinia = createPinia() 
export default pinia

3.main.ts 或者 main.js里面全局使用

import { createApp } from 'vue' 
import App from './App.vue' 
import pinia from './stores' 
createApp(App).use(pinia).mount('#app')

4.store目录下建立单独的状态管理文件（count举例子）

import { defineStore } from 'pinia'
// 一定要用（）包裹住这个{} 不然页面上就NAN
const useCounter = defineStore('counter', {
    state: () => (
    {
        count: 1
    })
})
console.log(useCounter)
export default useCounter

5.在任意组件上都可以使用

<template>
    <div class="home">
        <h2>PINIA</h2>
        <h2>count: {{ counterStore.count }}</h2>
        <a-button @click="incrementCount">count+1</a-button>
    </div>
</template>

<script setup>
import useCounter from '/src/stores/counter.js';
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'  //这里面是要用响应式api
const counterStore = useCounter()
const { count } = storeToRefs(counterStore)
// console.log(counterStore)

function incrementCount() {
    counterStore.count++
}
</script>

<style scoped></style>

vue开发者插件中也可以显示具体内容

vue框架 pinia基本使用方法

简单聊聊pinia

基本使用方法教程