Vue3中的pinia的使用

 一、下载依赖

npm i pinia

yarn add pinia

 二、使用方法

2.1 在main.js中引入pinia

import { createApp } from 'vue'
// 1. 引入pinia
import { createPinia } from 'pinia'
import './style.css'
import App from './App.vue'

// 2. 实例化pinia
let pinia = createPinia()


// 3. 挂载pinia
createApp(App).use(pinia).mount('#app')

2.2 在store文件夹中创建一个模块pinia，起名字叫 number

import { defineStore } from "pinia";

const useNumberStore = defineStore('number',{
  // 1.state
  state: () => ({
    num: 100,
    age: 19,
    name: 'wyc'
  }),
  // 2. actions
  actions: {
    // 添加方法
    increment() {
      this.num ++;
    },
    // 异步添加
    asyncIncrement() {
      setTimeout(() => {
        this.num += 20;
      }, 1000);
    }
  },
  // 3. getters
  getters: {
    // 返回 10 倍的 num 
    doubleNum(state) {
      return state.num * 10 
    },
    // 返回 100 倍的 num  调用自身getters中的方法
    doubelPlus() {
      return this.doubleNum * 10
    },
    // 向 getter 中传递参数  val 就是传递的参数  这么做 getter将不在缓存
    getNum(state) {
      return (val) => {
        return state.num + val;
      }
    }
  }
})


export default useNumberStore;

2.3 在vue文件中调用pinia数据，方法

<script setup>
import useNumberStore from "../store/number.js";

// 实例化store
let store = useNumberStore();

// 添加操作
const addNum = () => {
  store.increment();
};
// 异步添加
const asycnAddNum = () => {
  store.asyncIncrement()
};

// 还原数据
const reset = () => {
  store.$reset();
  // store.$state = { num: 10 }
  // store.$patch({ num: 10 })
};

// 监听store中state的变化
store.$subscribe((mutation, state) => {
  console.log(mutation, state);
});
</script>

<template>
  <div>
    我的名字叫---{{ store.name }} <br />
    我的年龄是---{{ store.age }} <br />
    现在的数值---{{ store.num }} <br />
    <button @click="addNum">++</button> <br />
    <button @click="asycnAddNum">async ++</button> <br>
    <button @click="reset">清除数据</button>

    <hr />
    getters中的10倍数---{{ store.doubleNum }} <br />
    getters中的100倍数--- {{ store.doubelPlus }} <br />
    getters中传递参数---{{ store.getNum(10) }} <br />
  </div>
</template>

<style scoped>
</style>

效果展示： 

vue3中pinia的使用