为什么说不学Pinia你就out了。
Pinia是下一代Vue状态管理库，在Vue-cli中已经替换了原来的Vuex，且同时支持Vue2.0和Vue3.0两个大版本。Pinia简化了状态管理，抛弃了Vuex中的mutation，只有 state, getter 和 action ，且完美支持TypeScript及Vue3.0的hooks，可以很好的进行代码分割。
一、安装Pinia
初始化项目： npm init vite@latest
安装Pinia: npm i pinia
import { createApp } from 'vue'
import App from './App.vue'
// 导入构造函数
import { createPinia } from 'pinia'
// 创建Vue应用实例app
const app = createApp(App)
// 应用以插件形式挂载Pinia实例
app.use(createPinia())
app.mount('#app')
二、创建全局状态store
// stores/counter.ts
// 引入仓库定义函数
import { defineStore } from 'pinia'
// 传入2个参数，定义仓库并导出
// 第一个参数唯一不可重复，字符串类型，作为仓库ID以区分仓库
// 第二个参数，以对象形式配置仓库的state,getters,actions
export const useCounterStore = defineStore('counter', {
// 存储全局状态
state: () => {
return { name: 'hello pinia', count: 0 }
},
// 用来封装计算属性，有缓存功能，类似于computed
getters: {
getName(state) {
return state.name + '...'
}
},
// 处理业务逻辑，对state中的数据进行修改
actions: {
increment() {
this.count++
},
subtract() {
this.count--
}
}
})
三、基本示例
一旦仓库被实例化，就可以直接通过实例对象访问仓库上的state、getters和actions中定义的任何属性。
{{ store.getName }}
数值变化：{{ store.count }}
四、数据解构
Pinia中的store是一个用reactive包装的对象，不能直接通过ES6规范进行解构，因为这样做会使状态不具有响应性。
为了保持状态的响应行，应通过storeToRefsAPI 对仓库实例结构以便获取状态。
name属性示例：{{ name }}
getter属性示例：{{ store.getName }}
数值变化：{{ count }}
五、数据修改
Pinia中数据修改可以一次修改一个状态，也可以一次修改多个状态。
修改单个状态比较简单，不像Vuex每次需要调用Vuex的api，Pinia中，修改单个状态，可直接通过仓库函数的实例直接调用。
如以下示例中修改name值
// stores/name.ts
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return { name: 'hello pinia', count: 0 }
},
getters: {
getName(state) {
return state.name + '...'
}
},
actions: {
setName(val: string) {
this.name = val
},
increment() {
this.count++
}
}
})
name属性示例：{{ store.name }}
getter属性示例：{{ store.getName }}
修改多条状态，Pinia中一次修改多条状态，需要通过官方提供的$patch，$patch 方法可以接受的参数类型可以是一个函数也可以是一个对象对象。
count：{{ store.count }}
name：{{ store.name }}
6、多仓库之间的调用
在 Pinia 中，可以在一个 store 中 import 另外一个 store ，然后通过调用引入 store 方法的形式，获取引入 store 的状态。
定义config
// stores/config.ts
import { defineStore } from 'pinia'
export const useConfigStore = defineStore('config', {
state: () => {
return {
primaryColor: '#5468ff'
}
},
getters: {},
actions: {}
})
定义name
// stores/name.ts
import { defineStore } from 'pinia'
import { useConfigStore } from './config'
export const useCounterStore = defineStore('counter', {
state: () => {
return { name: 'hello pinia', count: 0 }
},
getters: {
getName(state) {
return state.name + '...'
},
// 调用外部的store
getConfig() {
const config = useConfigStore()
return config.primaryColor
}
},
actions: {
setName(val: string) {
this.name = val
},
increment() {
this.count++
}
}
})
应用仓库数据
count：{{ store.count }}
name：{{ store.name }}
name：{{ store.getConfig }}
Pinia个人感触最深的是对于TypeScript的兼容，无论是在模板语法或者是逻辑处理中，都可以完美的提示仓库上的state、getters和actions中定义的任何属性。
7、往期内容已全部收录在专栏中：
Flutter专栏_WEB前端李志杰的博客-CSDN博客
Vue专栏_WEB前端李志杰的博客-CSDN博客
文章来源
您阅读本篇文章共花了：
发表评论