提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
提示:以下是本篇文章正文内容,下面案例可供参考
一.什么是Pinia?
1.pinia 和 vuex 具有相同的功效, 是 Vue 的存储库,它允许您跨组件/页面共享状态。
2.设计使用的是 Composition api,更符合vue3的设计思维。
3.Pinia 对 Vue 2 和 Vue 3 都有效,并且不需要您使用组合 API。
作者:微笑的弧度_c50f
链接:https://www.jianshu.com/p/5f997e75f31c
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
二.Pinia 的使用
2.1Pinia 的使用
在安装Pinia的时候可以使用yarn 也可以使用 npm
yarn add pinia
# 或者使用 npm
npm install pinia
2.2 Pinia 的引入
一般我们在做项目的时候,都会在main.js 或者 main.ts 中引入。
vue3 中引入的使用
import {
createApp } from 'vue'
import App from './App.vue'
import {
createPinia } from 'pinia';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app')
vue2 中引入的使用
import {
createPinia } from 'pinia'
const pinia = createPinia();
new Vue({
el: '#app',
// 其他选项...
// ...
// 注意同一个 `pinia` 实例可以在多个 Vue 应用程序中使用
// 同一个页面
pinia,
})
2.3 Pinia 模块的创建
我们可以在vue的项目中,在src文件夹下面创建一个store文件夹专门来管理我们的pinia 模块。在文件夹下面我们可以创建多个js或者ts文件来对应我们的模块。
下面就是我在store 文件夹下面创建的一个index.js模块。
作者:微笑的弧度_c50f
链接:https://www.jianshu.com/p/5f997e75f31c
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
// 想要使用必须先引入 defineStore;
import {
defineStore } from 'pinia';
// 这里我们使用的是es6 的模块化规范进行导出的。
// defineStore 方法有两个参数,第一个参数是模块化名字(也就相当于身份证一样,不能重复)
// 第二个参数是选项,对象里面有三个属性,相比于vuex 少了一个 mutations.
export const useStore = defineStore('main', {
state(){
// 存放的就是模块的变量
return {
count: 10
}
},
getters:{
// 相当于vue里面的计算属性,可以缓存数据
},
actions:{
// 可以通过actions 方法,改变 state 里面的值。
}
})
2.4 Pinia 数据页面的使用
我们以vue3 页面为例,简单介绍一下,Pinia页面的使用
<template>