vue3 pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。
pinia官网

使用方法

1.首先使用 vite 初始化一个 vue3 项目

npm init vite@latest
// 根据命令选项依次选择：vue - typescript
// 安装依赖
npm install // 安装依赖
npm install pinia // 安装 pinia
npm run dev // 启动项目
1
2
3
4
5
6

2.在 main.ts入口文件中引入 pinia

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

const pinia = createPinia()
createApp(App).use(pinia).mount('#app') // 使用 pinia
1
2
3
4
5
6

3.在 src下新建 store/counter.ts 用来存放跨组件之间的共享数据

import { defineStore } from "pinia";
// Composition API 组合式api
// defineStore 定义全局共享数据
// defineStore的第一个参数表示唯一id,即命名空间，第二个参数是配置信息

export default defineStore('counter',{/**第一个参数是命名空间 */
    state: () => {
        return {
            count: 1,
            title: 'pinia test'
        }
    },
    // 在 actions 中改变数据, 异步操作放在 actions 中
    actions: {
        add() {
            this.count++
        },
        // 异步操作
        asyncAdd() {
            setTimeout(() => {
                this.count++
            }, 2000)
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

4.分别在 App.vue和HelloWorld.vue 2 个不相关的单文件组件中共享 couter.ts中的数据

App.vue

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import useCounterStore from './store/counter'
import HelloWorld from './components/HelloWorld.vue'
const store = useCounterStore()
// storeToRefs方法将 store中的数据转换成响应式
const { count, title } = storeToRefs(store)

const addHandle = () => {
  store.add() // 这里直接调用action中的方法
}
</script>

<template>
  <h2>这是 pinia test</h2>

  <h1>{{ title }}</h1>

  <button @click="addHandle">{{ count }}</button>

  <hello-world />
</template>

<style scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

HelloWorld.vue

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import useCountStore from '../store/counter'
const store = useCountStore()
const { count, title } = storeToRefs(store)

const addClick = () => {
  store.add() // 调用 counter.ts中的方法
}
</script>

<template>
  <h1>这是 hello world 组件</h1>

  <h2>{{ title }}</h2>

  <button @click="addClick">{{ count }}</button>
</template>

<style scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

后记：

为什么要使用 pinia?

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

1. dev-tools 支持
   1).跟踪动作、突变的时间线
   2).Store 出现在使用它们的组件中
   3).time travel 和 更容易的调试
2. 热模块更换
   1).在不重新加载页面的情况下修改您的 Store
   2).在开发时保持任何现有状态
3. 插件：使用插件扩展 Pinia 功能
4. 为 JS 用户提供适当的 TypeScript 支持或 autocompletion
5. 服务器端渲染支持

6. 与vuex有什么不同？

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，
提供了 Composition-API 风格的 API，最重要的是，
在与 TypeScript 一起使用时具有可靠的类型推断支持。
1
2
3