一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

pinia-学习之路 02，使用

引言

本系列会以我的一个理解，来介绍并开始学习 Pinia。

中间会插入自己所联系到的乱七八糟的 知识点。

使用

在上一讲，主要介绍了 Pinia，以及它的安装。

这里讲解下如何进行引入和使用

引入

首先在我们的 src 目录下的 main.ts 中进行注册，挂载到我们的 vue3 实例上。使用的是 pinia 中的 createPinia 方法。

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

const pinia = createPinia()

createApp(App).use(pinia).mount('#app')

之后再与 main.ts 同级目录的地方创建 store 文件夹，相信这个大家都不陌生，就是之前使用 VueX 时经常创建的。

在 store 文件夹下创建 index.ts 文件，作为入口文件。

书写我们的index.ts 文件里面的内容，通过 pinia 中的 defineStore 方法进行创建自己的 store 仓库。

第一个参数是仓库名是 string 类型
第二个就是我们的对象，里面放置的是我们常见的 state, getters, actions。

注意没有 mutations 了

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
  state: () => {
    return {}
  },
  getters: {},
  actions: {},
})

我们这里写个 hello 的小例子，体验一下这个 Pinia 。

首先在 state 里面添加一个 hello 变量

state: () => {
    return {
      hello: 'hello world'
    }
  },

之后我们在与 store 同级目录下，创建 view 文件夹，在创建一个 hello.vue 文件

<template>
  <div>{{ myHello }}</div>
</template>

<script setup lang="ts">
import { mainStore } from '../store/index'

const store = mainStore()

const { hello: myHello } = store
console.log('myHello', myHello)
</script>

创建好文件后，我们需要在 App.vue 中进行导入使用

<template>
  <div>
    <Hello></Hello>
  </div>
</template>

<script setup lang="ts">
import Hello from './view/hello.vue'
</script>

这样准备完毕后，可以刷新页面，看到我们的 hello world 成功的在页面中显示。

其实到这里，讲解已经完毕。

但是这里细心的同学们会发现，我在 hello.vue 文件中，进行了打印 myHello 这个变量，我想知道它目前的状态，是否是一个响应式数据，还是正常的数据。

可以很明显的看到，目前它的值是非响应式数据。

总结

学习了 Pinia 这个状态管理的使用。

Pinia-学习之路 02，使用

pinia-学习之路 02，使用

引言

使用

引入

总结