pinia的安装和使用

1.什么是 pinia?

pinia是一个类似于vuex的状态管理工具

2.inia和vuex的区别

pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子
与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的仪式，提供了 Composition-API 风格的 API；
最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持；

3.安装和使用

1.安装

yarn add pinia
# 或者使用 npm
npm install pinia

2.使用

在根目录新建store文件，store中新建index.js文件

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
    state: () => {
        return { count: 0 };
    },
    getters:{
        //获取参数
        getCount:state=>state.count
    },
    // 也可以这样定义
    // state: () => ({ count: 0 })
    actions: {
        increment() {
            this.count++;
        },
    },
});

在main.js中导入

import {createPinia} from 'pinia'
const store = createPinia()
let app = createApp(App) 

app.use(store)

在具体模块中使用

<template>
  <div class="about">
    <h1>{{counter.count}}</h1>
    <button @click="count++" type="button">count+</button>
    <button @click="add" type="button">count+1</button>
    <!-- getters获取数据 -->
    {{counter.getCount}}
  </div>
</template>
<script setup>
import { useCounterStore } from '@/store';

    const counter = useCounterStore();
    const add=()=>{
        counter.increment()
    }
</script>

pipia的解构

import {storeToRefs} from 'pinia'
const counter = useCounterStore();
const {count} = storeToRefs(counter)