31省最新疫情今天网站优化排名易下拉排名
目录
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 //只需要配置这里
})