全球新冠死亡人数四川网络推广seo

目录

0前言

1 手动添加Pinia

2 创建与使用仓库（Setup Store 组合式）

2.1 创建仓库

2.2 使用仓库数据

2.3 解构响应式数据

3 持久化插件

---

0前言

官网：Pinia | The intuitive store for Vue.js

---

1 手动添加Pinia

上手之后，可以通过create-vue脚手架勾选Pinia快速添加

第一步：安装Pinia

在没有Pinia的相目中，执行以下命令

npm i pinia

第二步：在main.js中添加pinia

此处为VUE3的操作，VUE2的操作请见官方文档：开始 | Pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const pinia = createPinia() // 创建Pinia实例
const app = createApp(App) // 创建根实例app.use(pinia) // pinia插件的安装配置
app.mount('#app') // 视图的挂载

也可以用链式写法：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const pinia = createPinia()createApp(App).use(pinia).mount('#app')

---

2 创建与使用仓库（Setup Store 组合式）

另一种方式（Option Store 选项式）见 定义 Store | Pinia 

2.1 创建仓库

你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
(比如 `useUserStore`，`useCartStore`，`useProductStore`)
第一个参数是你的应用中 Store 的唯一 ID

// store/count.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'export const usecountStore = defineStore('count', () => {// ———————————————————声明数据 state—————————————————————const number1 = ref(1)// ———————————————————声明方法 actions—————————————————————const addNum = () => {// 同步number1.value++}const subNum = () => {// 异步 - 模拟异步，1s后操作setTimeout(() => {number1.value--}, 1000)}// ———————————————————声明计算属性—————————————————————const doubleNum = computed(() => number1.value * 2)// ———————————————————导出属性与方法—————————————————————return {number1,addNum,subNum,doubleNum}
})

---

2.2 使用仓库数据

<script setup>
// 导入仓库
import { usecountStore } from '@/store/count'
// 获取数据
const count = usecountStore()
</script><template><div>number1: {{ count.number1 }}</div><div>doubleNumber1: {{ count.doubleNum }}</div><button @click="count.addNum">+1</button><button @click="count.subNum">-1</button>
</template><style scoped></style>

---

2.3 解构响应式数据

直接解构仓库中的响应式数据时，会得到非响应式的数据，需要用pinia中的 storeToRefs() 方法

注意：actions不需要！因为我们并不会改方法

<script setup>import { storeToRefs } from 'pinia'
const store = useCounterStore()// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性const { name, doubleCount } = storeToRefs(store)// 作为 action 的 increment 可以直接解构const { increment } = store</script>

---

3 持久化插件

官网：Pinia Plugin Persistedstate

vue2持久化插件：GitHub - robinvdvleuten/vuex-persistedstate

第一步：安装插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

第二步：在main.js中使用

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))

第三步：在仓库中配置

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'export const useCounterStore = defineStore('counter', () => {...return {count,doubleCount,increment}
}, {persist: true    //只需要配置这里
})