本文主要是介绍Vue3-Pinia(大菠萝)附源码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- Pinia 开源地址
- Pinia 定义与起源
- 优点与特性
- Pinia使用
- 准备一个小模块(可参考以下程序)
- 搭建 pinia 环境
- 存储+读取数据
- 修改数据(三种方式)
- storeToRefs
- getters
- $subscribe
- store组合式写法
更多相关内容可查看
Pinia 开源地址
git地址:https://gitee.com/its-a-little-bad/vue.git
pinia官网地址:https://pinia.vuejs.org/zh/
node版本:20.8.1
Pinia 定义与起源
定义:Pinia 是 Vue 的存储库,允许跨组件/页面共享状态。它实际上可以被视为 Vuex 的升级版,但为了尊重原作者,所以命名为 Pinia 而不是 Vuex。
起源:Pinia 是 Vue 3 官方推荐的状态管理库,旨在提供一个更加简单和灵活的 API,同时保留 Vuex 的主要功能。
优点与特性
- 简化流程:Pinia 抛弃了 Vuex 中的 Mutation,这意味着你可以直接更新状态,无需再注册
Commit,从而简化了状态管理流程。 - 支持Vue 2和Vue 3:Pinia 同时支持 Vue 2 和 Vue 3,这使得开发者在迁移项目或同时使用不同版本的 Vue
时能够更加灵活。 - TypeScript 支持:Pinia 提供了出色的 TypeScript
支持,允许开发者在编写代码时获得类型提示和自动补全,提高了代码的质量和可维护性。 - 灵活的状态组织:与 Vuex 中的模块不同,Pinia 允许开发者自由地组织和管理状态,使得在大型应用中管理状态变得更加灵活和方便。
- 与 Vue 3 的组合式 API 无缝集成:Pinia 能够与 Vue 3 的组合式 API 无缝集成,使得状态管理代码更加清晰和模块化。
- 轻量级:Pinia 的体积非常小,只有大约1KB左右,这对于需要优化项目大小的应用程序来说是一个优势。
- 支持插件:Pinia 支持插件来扩展自身功能,为开发者提供了更多的灵活性和可定制性。
Pinia使用
准备一个小模块(可参考以下程序)
<template><div class="Count"></div><h2>当前求和为{{sum}}</h2><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add">加</button><button @click="sub">减</button>
</template><script>
export default {name:'Count'}
</script><script setup>
import { ref } from 'vue';
let sum = ref(0)
let n = ref(1)
function add(){sum.value += n.value
}
function sub(){sum.value -= n.value
}</script><style>
.select,button{margin:0 5px;height:40px;
}</style>
<template><button @click="getMseeage">获取</button><ul><li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li></ul>
</template><script>
export default {name:'LoveTalk'
}
</script><script setup>
import { idText } from 'typescript';
import { reactive } from 'vue';
import axios from 'axios';
import {nanoid} from 'nanoid'
let talkList = reactive([{id:1,title:'aaa'},{id:2,title:'bbb'},{id:3,title:'ccc'},
])async function getMseeage(){let {data:{content:title}} =await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')let obj = {id:nanoid(),title}talkList.unshift(obj)
}</script><style></style>
搭建 pinia 环境
第一步:npm install pinia
第二步:操作src/main.ts
import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia,用于创建pinia */
import { createPinia } from 'pinia'/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount('#app')
此时开发者工具中已经有了pinia
选项
存储+读取数据
Store
是一个保存:状态、业务逻辑 的实体,每个组件都可以读取、写入它。- 它有三个概念:
state
、getter
、action
,相当于组件中的:data
、computed
和methods
。 - 具体编码:
src/store/count.ts
// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{},// 状态state(){return {sum:6}},// 计算getters:{}
})
- 具体编码:
src/store/talk.ts
// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useTalkStore = defineStore('talk',{// 动作actions:{},// 状态state(){return {talkList:[{id:'yuysada01',content:'你今天有点怪,哪里怪?怪好看的!'},{id:'yuysada02',content:'草莓、蓝莓、蔓越莓,你想我了没?'},{id:'yuysada03',content:'心里给你留了一块地,我的死心塌地'}]}},// 计算getters:{}
})
- 组件中使用
state
中的数据
<template><h2>当前求和为:{{ sumStore.sum }}</h2>
</template><script setup lang="ts" name="Count">// 引入对应的useXxxxxStore import {useSumStore} from '@/store/sum'// 调用useXxxxxStore得到对应的storeconst sumStore = useSumStore()
</script>
<template><ul><li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.content }}</li></ul>
</template><script setup lang="ts" name="Count">import axios from 'axios'import {useTalkStore} from '@/store/talk'const talkStore = useTalkStore()
</script>
修改数据(三种方式)
- 第一种修改方式,直接修改
countStore.sum = 666
- 第二种修改方式:批量修改
countStore.$patch({sum:999,school:'twl'
})
- 第三种修改方式:借助
action
修改(action
中可以编写一些业务逻辑)
import { defineStore } from 'pinia'export const useCountStore = defineStore('count', {/*************/actions: {//加increment(value:number) {if (this.sum < 10) {//操作countStore中的sumthis.sum += value}},//减decrement(value:number){if(this.sum > 1){this.sum -= value}}},
})
- 组件中调用
action
即可
// 使用countStore
const countStore = useCountStore()// 调用对应action
countStore.incrementOdd(n.value)
storeToRefs
- 借助
storeToRefs
将store
中的数据转为ref
对象,方便在模板中使用。 - 注意:
pinia
提供的storeToRefs
只会将数据做转换,而Vue
的toRefs
会转换store
中数据。
<template><div class="count"><h2>当前求和为:{{sum}}</h2></div>
</template><script setup lang="ts" name="Count">import { useCountStore } from '@/store/count'/* 引入storeToRefs */import { storeToRefs } from 'pinia'/* 得到countStore */const countStore = useCountStore()/* 使用storeToRefs转换countStore,随后解构 */const {sum} = storeToRefs(countStore)
</script>
getters
- 概念:当
state
中的数据,需要经过处理后再使用时,可以使用getters
配置。 - 追加
getters
配置。
// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{/************/},// 状态state(){return {sum:1,school:'twl'}},// 计算getters:{bigSum:(state):number => state.sum *10,upperSchool():string{return this. school.toUpperCase()}}
})
- 组件中读取数据:
const {increment,decrement} = countStore
let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)
$subscribe
通过 store 的 $subscribe()
方法侦听 state
及其变化
talkStore.$subscribe((mutate,state)=>{console.log('LoveTalk',mutate,state)localStorage.setItem('talk',JSON.stringify(talkList.value))
})
store组合式写法
import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'export const useTalkStore = defineStore('talk',()=>{// talkList就是stateconst talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])// getATalk函数相当于actionasync function getATalk(){// 发请求,下面这行的写法是:连续解构赋值+重命名let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串,包装成一个对象let obj = {id:nanoid(),title}// 放到数组中talkList.unshift(obj)}return {talkList,getATalk}
})
这篇关于Vue3-Pinia(大菠萝)附源码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!