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、效果如下：

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