Vue3中pinia的使用

pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据

要想使用pinia,首先需要下载

npm install pinia --save //安装pinia
npm install pinia-plugin-persist --save //安装pinia-plugin-persist，数据持久化插件

 或者

 yarn add pinia

如果报错并且报错是这样的：

在安装命令后面加 --legacy-peer-deps 

npm install pinia --save --legacy-peer-deps //安装pinia
npm install pinia-plugin-persist --save --legacy-peer-deps  //安装pinia-plugin-persist，数据持久化插件

在main.ts中配置

 

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

具体语法：在store文件下创建index.ts

import { defineStore } from 'pinia'
interface Icon{
    num:number
}
export const count = defineStore("count", {
    //定义数据
    state: () => {
        return {
            num: 0
        }
    },
    //定义方法
    actions: {
        add(state:Icon) {
            state.num++
        }
    },
    getters: {

    }
})

 测试 : 在views文件夹下创建一个count.vue文件

<template>
  <div id="root">
    {{ counts.num }}
    <button @click="add">点击+1</button>
  </div>
</template>
<script lang="ts" setup>
import { count } from "@/store/Add";
const counts = count();
const add = () => {
    counts.add(counts);
};
</script>