Vue
Node.js
构建工具
路由
接口请求
状态管理
Pinia
Pinia 是一个状态管理库,什么是状态管理库?我们又为什么需要 Pinia 呢?
当我们需要在 Vue 的组件(页面)中共享状态(变量)时,总是特别的麻烦。如果是父子间的组件还可能通过 v-model 的方式共享,但多个没有父子关系的组件(页面)使用 v-model 共享状态就是不可能的。
又总是有很多状态不得不在各种组件(页面)间使用。比如以下的 twitter 页面,用户登录后的头像就同时出现在了页面的三个地方。它们应该由同一个状态管理,相互保持一致。
而状态管理库,就解决了这个问题,让我们可以在任意组件(页面)管理同一个状态。
$$tip
也许很多人听说过 Vuex 这个状态管理库, Pinia 最初是作为 Vuex5的实验版本推出的(目前 Vuex 的最新版为 4), Pinia 的开发团队中有很多人也来自 Vuex 团队。
而随后大家发现 Pinia 已经足够好用且成熟,随之连 Vuex 文档中都推荐使用 Pinia。
$$
$$tip
更多信息,查看 Pinia 官方文档,https://pinia.vuejs.org/introduction.html
$$
上手 Pinia
下面我们以一个计数器的案例来实验 pinia,使用 options API 的写法。
安装 pinia
使用 npm install pinia
命令安装 pinia。
创建 pinia
在 src
文件夹中创建名为 pinia
的文件夹,并在其他创建 index.js
文件,输入以下代码。
import { createPinia } from "pinia"
const pinia = createPinia()
export default pinia
挂载 pinia 到 vue 上
打开 main.js
文件,增加引入并挂载 pinia
的代码。
import { createApp } from "vue"
import App from "./App.vue"
import pinia from "./pinia"
const app = createApp(App)
// 挂载 pinia
app.use(pinia)
app.mount("#app")
创建组件
创建 Counter 与 Viewer 两个组件,代码分别如下。
components/Counter.vue
<template>
<button @click="hit">点击计数</button>
</template>
<script>
import { useCounterStore } from "../stores/counter"
export default {
data() {
const conterStore = useCounterStore() // 引用 conterStore 对象
return {
conterStore,
}
},
methods: {
hit() {
this.conterStore.increase()
},
},
}
</script>
components/Viewer.vue
<template>
<button @click="hit">点击计数</button>
</template>
<script>
import { useCounterStore } from "../stores/counter"
export default {
data() {
const conterStore = useCounterStore() // 引用 conterStore 对象
return {
conterStore,
}
},
methods: {
hit() {
this.conterStore.increase()
},
},
}
</script>
修改 App.vue
文件如下。
<template>
<Viewer />
<Counter />
</template>
<script>
import Counter from "./components/Counter.vue"
import Viewer from "./components/Viewer.vue"
export default {
components: {
Counter,
Viewer,
},
}
</script>
$$tip
完整代码放在了 github 上,https://github.com/lalawila/pinia-counter
$$