1. pinia介绍
官网关于pinia的介绍
Pinia
是一个状态管理库,由Vue
核心团队维护,对Vue 2
和Vue 3
都可用。现有用户可能对
Vuex
更熟悉,它是Vue
之前的官方状态管理库。由于Pinia
在生态系统中能够承担相同的职责且能做得更好,因此Vuex
现在处于维护模式。它仍然可以工作,但不再接受新的功能。对于新的应用程序,建议使用Pinia
。事实上,
Pinia
这款产品最初是为了探索Vuex
的下一个版本,整合了核心团队关于Vuex 5
的许多想法。最终,我们意识到Pinia
已经实现了我们想要在Vuex 5
中提供的大部分内容,因此决定将其作为新的官方推荐。相比于
Vuex
,Pinia
提供了更简洁直接的API
,并提供了组合式风格的API
,最重要的是,在使用TypeScript
时它提供了非常好的类型推导。
2. 安装
npm install pinia --save
3. 使用
1. src
文件夹下新建store/index.js
import {
createPinia } from "pinia";
// 创建store实例
const store = createPinia();
export default store;
2. main.ts
引入
import store from '@/store/index.js'
const app = createApp(App);
app.use(store);
3.store
下新建js
文件,比如userInfo.js
import {
defineStore } from 'pinia'
export const userStore = defineStore({
id: 'userInfo', // 命名,唯一
state: () => {
return {
userInfo: {
}
}
},
actions: {
setUserInfo(data) {
// 可直接通过this访问state属性
this.userInfo = data;
},
}
})
4. 页面使用
import {
userStore } from "@/store/userInfo.js";
export default defineComponent({
setup() {
const store = userStore();
console.log('store实例', store);
return {
}
},