vue3集成Pinia

当前文章基于vue3应用集成vue-router_小白喝雪碧的博客-CSDN博客

在创建项目时，可选择直接引入Pinia。这里为了加深理解，采用了单独引用。

参考官网：介绍 | Pinia 中文文档

下一篇vue3集成Element Plus_vue3 elementplus-CSDN博客

1、安装依赖：

npm install pinia

 2、创建pinia并传递给应用程序：

import { createPinia } from 'pinia'

const pinia = createPinia()

app.use(pinia)

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

import router from "./router/index.js"
const pinia = createPinia()

let app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')

什么是 Store ？

一个 Store （如 Pinia）是一个实体，它持有未绑定到您的组件树的状态和业务逻辑。换句话说，它托管全局状态。它有点像一个始终存在并且每个人都可以读取和写入的组件。它有三个概念，state、getters 和 actions 并且可以安全地假设这些概念等同于组件中的“数据”、“计算”和“方法”。

3、定义一个Store：

您应该在不同的文件中定义每个 store，以充分利用 pinia。

3.1defineStore()

在深入了解核心概念之前，我们需要知道 Store 是使用 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递：

import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
  // other options...
})

这个 name，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use... 是跨可组合项的约定，以使其符合你的使用习惯。

3.2定义store的两种方式：

新建src/stores/counter.js：（一个简单的计数器）

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  // 也可以定义为
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

新建src/stores/supercounter.js：（函数定义一个简单的计数器）

可以使用一个函数（类似于一个组件setup()）来为更高级的用例定义一个Store：

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useSuperCounterStore= defineStore('supercounter', () => {
  //state
  const count = ref(0)
  //actions
  function increment() {
    count.value++
  }
  //函数形式store，使用vue的计算属性computed实现getters
 let doubleCount = computed(() => count.value * 2)
  return { count, increment, doubleCount }
})

4、使用store：

在vue页面中引入store，然后可以直接调用相关的state(属性)、getters(计算)与actions(方法)。

store 是一个用reactive 包裹的对象，这意味着不需要在getter 之后写.value。

修改src/stores/page1与src/stores/page2，最终为：

src/stores/page1：

<template>
    <h1>page1</h1>
    <br />
    计数器1：<button @click="counterStore.count++">加一</button>
    <!-- 计数器1：<button @click="counterStore.increment">加一</button> -->
    <br />
    <span>当前值为：{{ counterStore.count }}</span>
    <br />
    <span>当前值*2为：{{ counterStore.doubleCount }}</span>
    <br />
    计数器2：<button @click="superCounterStore.count++">加一</button>
    <!-- 计数器2：<button @click="superCounterStore.increment">加一</button> -->
    <br />
    <span>当前值为：{{ superCounterStore.count }}</span>
    <br />
    <span>当前值*2为：{{ superCounterStore.doubleCount }}</span>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'
import { useSuperCounterStore } from '@/stores/supercounter'
let counterStore = useCounterStore();
let superCounterStore = useSuperCounterStore();
</script>

src/stores/page2：

<template>
    <h1>page2</h1> 
    <br/>
    <span>计数器1当前值为：{{counterStore.count}}</span>
    <br/>
    <span>计数器2当前值为：{{superCounterStore.count}}</span>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'
import { useSuperCounterStore } from '@/stores/supercounter'
let counterStore=useCounterStore();
let superCounterStore=useSuperCounterStore();
</script>

5、启动网页：