vue3中如何使用Pinia

Pinia是一个基于Vue的状态管理库,它允许你跨组件或页面共享状态。它是为了解决Vuex在大型应用中出现的一些问题而开发的。

 Pinia有三个👉 state、actions 与 getters 属性的 Option 对象

 你可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，   而 actions 则是方法 (methods)。

1.安装pinia：运行命令 npm install pinia 来安装pinia。

npm install pinia

2.创建pinia实例:

(1).在main.js入口文件中添加圈出来的语句

 (2).在src中新建文件夹pinia,在pinia文件夹下新建index.js 在index.js中添加以下语句

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

(3). 在pinia文件夹下新建modules文件夹, 在这个文件夹下创建public.js文件 ,public.js中输入以下内容

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count:0
  }),
  getters:{
    double:(state) =>state.count *2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

 (4).如何在组件中使用Pinia

import {useCounterStore} froom '@/pinia/modules/public'

①state: 调用count

const counter = ref(useCounterStore().count);

<div>Current Count: {{ counter }}</div>

②actions:点击按钮调用increment()方法

function clickBtnHandle() {
  useCounterStore().increment();
}

<button @click="clickBtnHandle">点击+1</button>

因为点击按钮的时候并不会改变counter的值,所以我们需要watch监听useCounterStore().count的值,并重新给counter 赋值

import { watch, ref } from 'vue'

watch(
  () => useCounterStore().count,
  (value) => {
    counter.value = value
  }
)

③getters

  <div>{{ useCounterStore().double }}</div>

 完整代码:

以上示例演示了如何使用pinia的核心功能。更多详细的用法和属性请参阅pinia官方文档。