pinia应用

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

简要记录引入方法：

1、在main.js文件

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

2、store文件夹中定义counter.js

import { ref } from "vue";
import { defineStore } from 'pinia'export const useCounterStore  = defineStore('counter', () => {
const count = ref(0)function increment() {count.value++}function subtraction(){count.value--}function setInitNum(num){count.value = num}return { count, increment, subtraction, setInitNum }
})

3、组件中使用

import { ref } from "vue";
import { useCounterStore } from "../store/counter";const num = ref(0);
const counter = useCounterStore();
const inputNum = () => {counter.setInitNum(num.value);
};
const changeData = (flag) => {if (flag > 0) {counter.increment();} else {counter.subtraction();}num.value = counter.count;
};

4、这样就实现了一个加减组件

<div class="flex"><div @click="changeData(0)" class="btn">-</div><input v-model="num" class="input-box" @input="inputNum" /><div @click="changeData(1)" class="btn">+</div></div>

5、效果如下：

 输入框可以赋值，按钮加减。