求一键三连
希望大家看完觉得有用的话点赞、关注和收藏,感谢!!!
前言
对比
少了mutation和modules,很正常,因为完全用不到了,所以就没了,pinia真的比vuex方便多了,少写很多东西,逻辑上也更加简单
使用pinia
(ps:这里一开始的文件交index.js,就相当于./store文件夹的主文件)
单独定义每一个store,也就是一个单独的js文件
defineStore返回的是一个函数,不是一个store,用use来命名函数(hooks),一般是用js文件名(id)来命名。
useStore会返回一个store。
示例:
import {
defineStore } from 'pinia'
const useUser = defineStore("user", {
state: () => ({
name: "why",
age: 18,
level: 100
})
})
export default useUser
在组件使用时要重命名:id+store === id仓库
一般我们会解构来使用,这样比较方便,可以直接用store里的变量名,不用加 idstore 前缀了
因为是store,所以用storeToRefs( )
示例:
state
内部提供的方法加$
实例: 一般来说第一个一个个修改是最常用的,其他的用的少
function changeState() {
// 1.一个个修改状态
userStore.name = "kobe"
userStore.age = 20
userStore.level = 200
// 2.一次性修改多个状态
userStore.$patch({
name: "james",
age: 35
})
// 3.替换state为新的对象
const oldState = userStore.$state
userStore.$state = {
name: "curry",
level: 200
}
console.log(oldState === userStore.$state) //true 所以这里也可以发现不是真的替换,只是暂时的,age的旧值保留了
}
function resetState() {
userStore.$reset() //重置
}
对数据的修改再也不用传mutation了,爽
Getters
和之前没有太多差别,一共四个操作,真的很方便,超级爽,比vuex简单多了
template中实际使用
就特别简单,就相当于是一个方法,什么都不用加(不用加getters了)
Actions(没有context了)
异步函数放这里,有个特点,又使用this了。
特别注意:
这里就和之前的vuex不一样了,因为没有context上下文这个东西,是直接用的state
组件中获取数据:
const homeStore = useHome()
homeStore.fetchHomeMultidata().then(res => {
console.log("fetchHomeMultidata的action已经完成了:", res) //这是确认获取数据,打印一下 res是异步函数返回的值
})
这里唯一要说的就是补补异步函数和promise的功课,时不我待啊!
使用流程
安装pinia(菠萝)后
1.创建stores/pinia文件夹,在里面创建index.js文件,创建pinia,然后就可以使用pinia了
import {
createPinia} from 'Pinia'
const pinia=createPinia();
export default pinia;
2.在main.js中导入pinia,并使用它
import {
createApp } from 'vue'
import App from './App.vue'
import pinia from './pinia'
createApp(APP).use(pinia).mount(#app)
3.在pinia文件夹里创建你需要的store,分别创建单独的js文件即可,使用defineStore函数
这里以user.js为例
import {
defineStore } from 'pinia'
const userStore=defineStore("user",{
state:()=>({
name:'aaa',
age:28,
friends:[]
}),
getters:{
getFriendById(state) {
return function(id){
return state.friends.find(id)
}
}
},
actions:{
//获取网络请求
async fetchHomeMultidata() {
const res = await fetch("http://123.207.32.32:8000/home/multidata")
const data = await res.json()
//另一个写法
fetch("http://123.207.32.32:8000/home/multidata").then(res => {
res.json().then(data => {
console.log(data)
})
})
this.banners = data.data.banner.list
this.recommends = data.data.recommend.list
// resolve("bbb") //返回参数,自定义
}
}
})