一、Pinia和Vuex的对比

什么是Pinia呢?

Pinia开始于2019年,最初作为一个实验为Vue重新设计状态管理,让它用起来像组合式API(Composition API)

从那时到现在,最初的设计原则依然相同,并且同时兼容Vue2 Vue3 也不要求你使用 Composition API

Pinia本质上依然是一个状态管理的库用于跨组件页面进行状态共享(和Vuex Redux一样)

Pina和Vuex的区别

pinia最初是为了探索Vuex的下一次迭代会是什么样的,结合了Vuex5核心团队讨论中的许多想法

最终,团队意识到Pinia已经实现了Vuex5中大部分内容,所以决定用Pinia来替代Vuex

与Vuex比,Pinia提供了一个更简单的API 具有更少的仪式,提供了CompositionAPI风格的API

最重要的是,与TypeScript一起使用时具有可靠的类型推断支持;

和Vuex相比,Pinia有很多的优势:

如:mutation不再存在:

经常被认为是非常冗长; 最初带来了devtools集成,但这不再是问题.

更友好的TypeScript支持,Vuex之前对TS的支持不是很友好

不再有modules的嵌套结构:

可以灵活使用每一个store,是通过扁平化的方式来相互使用的

不再有命名空间的概念,不需要记住它们的复杂关系

如何使用Pinia

安装Pinia

JavaScript
yarn add pinia
// or with npm
npm i pinia

创建一个pinia并且将其传递给应用程序:

JavaScript
import { createPinia } from ‘pinia’

const pinia = createPinia()

export default pinia

JavaScript
// main.js文件中定义
import pinia from ‘./stores/index’

createApp(App).use(pinia).mount(‘#app’)

二、创建Pinia的Store

认识Store

什么是Store?

一个Store(如pinia)是一个实体,它会持有为绑定到你组件树的状态和业务逻辑,也就是保存了全局的状态;

有点像始终存在,并且每个人都可以读取和写入的组件

可以在你的应用程序中定义任意数量的Store来管理你的状态

Store有三个核心概念:

State getters actions

等同于组件的 data computed methods

一旦store被实例化,就可以直接在store上访问state getters 和 actions中定义的任何属性

定义一个Store

定义一个Store:

需要知道Store是使用defineStore()定义的

并且需要一个唯一名称,作为第一个参数传递

JavaScript
import { defineStore } from ‘pinia’

// defineStore 本身的返回值是一个函数
// 习惯用useXXX来命名 => 规范
const useCounter = defineStore(“counter”,{
state:()=> ({
count:999
})
})

export default useCounter

这个name,也称为id 是必要的的,Pinia使用它来将store连接到devtools

返回的函数统一使用useXXX作为命名方案,这是约定的规范

使用定义的Store

Store在它被使用之前是不会创建的,可以通过调用use函数来使用Store

JavaScript
<template>
<div class=”home”>
<h2>Home view</h2>
<h2>count: {{ counterStore.count }}</h2>
</div>
</template>

const counterStore = useCounter()
</script>

注意Store获取到后不能被解构,不然会失去响应式!

为了从Store中提取属性同时保持其响应式需要使用storeToRefs()

三、Pinia核心概念 State

认识和定义State

state是store的核心部分,因为store是用来帮助我们管理状态的

在Pinia中,状态被定义为返回初始状态的函数

操作State(一)

读取和写入state:

默认情况下,可以通过store实例访问状态来直接读取和写入状态

JavaScript
const counterStore = useCounter()

counterStore.count++
counterStore.name = “xiong”

重置State:

可以通过调用store上的$reset()方法将状态重置到其初始值;

JavaScript
const counterStore = useCounter()
counterStore.$reset()

操作State(二)

改变State:

除了直接使用store.counter++修改store,还可以调用$patch方法

它允许你使用部分”state”对象同时应用多个更改

JavaScript
function changeStateClick(){
// 1 一个一个修改状态
// userStore.name = “xiaoxiong”
// userStore.age = 18
// userStore.level = 9999

// 2 一次性修改多个状态
userStore.$patch({
name:”xx”,
age:20
})
}

替换State:

可以通过将其$state属性设置为新对象来替换Store的整个状态

JavaScript
counterStore.$state = {
counter:1,
name:”xxiong”
}

四、Pinia核心概念 Getters

认识和定义Getters

Getters相当于Store的计算属性:

可以用defineStore()中的getters属性定义

getters中可以定义接受一个state作为参数的函数

JavaScript
const useCounter = defineStore(“counter”,{
state:()=> ({
count:999,
friends:[
{ id:1,name:”xiong” },
{ id:2,name:”xx” },
{ id:3,name:”xxiong” },
]
}),
getters:{
// 1 基本使用
doubleCount(state){
return state.count * 2
},
// 2 一个getter引入另外一个getter
doubleCountAddOne(){
// 通过this访问 this绑定store实例
return this.doubleCount + 1
},
// 3 getters也支持返回一个函数
getFriendById(state){
return function(id) {
// 高阶js写法
return state.friends.find(item => item.id === id )

                // 普通写法
// for(let i = 0;i<state.friends.length;i++){
//     const friend = state.friends[i]
//     if(friend.id === id){
//         return friend
//     }
// }
}
},
// 4 getters中使用到别的store中的数据
showMsg(state){
// 展示 count 和 user内的信息
// 在上面导入 user包
// 1 获取user信息
const useStore = useUser()
// 2 获取自己信息 state

// 3 拼接信息
return `name:${useStore.name}-count:${state.count}`
}

}
})

访问Getters(一)

访问当前Store的Getters:

JavaScript
<h2>doubleCount: {{ countStore.doubleCount }}</h2>
<h2>doubleCountAddOne: {{ countStore.doubleCountAddOne }}</h2>
<h2>friend-2: {{ countStore.getFriendById(2) }}</h2>
<h2>拼接counter里面的count和user里面的名字: showMsg:{{ countStore.showMsg }}</h2>

Getters中访问自己的其他Getters:

可以通过 this来访问到当前store实例的所有其他属性:

JavaScript
doubleCountAddOne(){
// 通过this访问 this绑定store实例
return this.doubleCount + 1
},

访问其他store的Getters:

JavaScript
// 4 getters中使用到别的store中的数据
showMsg(state){
// 展示 count 和 user内的信息
// 在上面导入 user包
// 1 获取user信息
const useStore = useUser()
// 2 获取自己信息 state

// 3 拼接信息
return `name:${useStore.name}-count:${state.count}`
}

访问Getters(二)

Getters也可以返回一个函数

JavaScript
// 3 getters也支持返回一个函数
getFriendById(state){
return function(id) {
// 高阶js写法
return state.friends.find(item => item.id === id )

        // 普通写法
// for(let i = 0;i<state.friends.length;i++){
//     const friend = state.friends[i]
//     if(friend.id === id){
//         return friend
//     }
// }
}
},

五、Pinia核心概念 Actions

认识和定义Actions

Actions相当于组件中的methods

使用defineStore()中的actions属性定义,且它们非常适合业务逻辑

和getters一样,在actions中可以通过this访问整个store实例的所有操作;

JavaScript
actions:{
// 用来定义方法,这里不会给我们传进来一个state,
// 他用来传递参数
increment() {
this.count++
},
// 如:下示例
incrementAdd(num){
this.count += num
}
}

Actions执行异步操作

Actions中是支持异步操作的,我们可以编写异步函数,在函数中使用await

JavaScript
actions:{
async fetchHomeMultidata(){
const res = await fetch(“http://xxxx:8000/home/”)
const data = await res.json()
// console.log(data) // 拿到数据
this.banners = data.data.banner.list
this.recommends = data.data.recommend.list
}
}

声明：本站所有资源，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Java 响应式

一、Pinia和Vuex的对比

什么是Pinia呢?

Pina和Vuex的区别

如何使用Pinia

二、创建Pinia的Store

认识Store

定义一个Store

使用定义的Store

三、Pinia核心概念 State

认识和定义State

操作State(一)

操作State(二)

四、Pinia核心概念 Getters

认识和定义Getters

访问Getters(一)

访问Getters(二)

五、Pinia核心概念 Actions

认识和定义Actions

Actions执行异步操作

合作伙伴

我要赚钱

有站网，站长需要的精彩内容从这里开始

一、Pinia和Vuex的对比

什么是Pinia呢?

Pina和Vuex的区别

如何使用Pinia

二、创建Pinia的Store

认识Store

定义一个Store

使用定义的Store

三、Pinia核心概念 State

认识和定义State

操作State(一)

操作State(二)

四、Pinia核心概念 Getters

认识和定义Getters

访问Getters(一)

访问Getters(二)

五、Pinia核心概念 Actions

认识和定义Actions

Actions执行异步操作

相关文章