1、安装
npm i pinia -S
2、创建store基本结构
1、在src下创建store文件夹并创建app.js文件，同时编写基本代码结构
// 引入实例化store的函数
import { defineStore } from "pinia";
// 实例出一个名为app的store,那appStore是什么？它代表当前这个store文件，下面会导出这整个写好的store供给其他页面使用
const appStore = defineStore("app", {
// 存数据的
state: () => {
return {
count: 1,
};
},
// 计算属性
getters: {},
// 同/异步函数都在这里写
actions: {},
});
export default appStore;
2、到main.ts中全局注册一下pinia,这样整个项目都可以使用pinia的钩子函数了
// 引入
import { createPinia } from 'pinia'
// 实例化
const store = createPinia()
// 全局使用(在中间加即可)
createApp(App).use(store).mount('#app')
3、子页面如何使用store/app.js中的store数据
// 以HelloWorld.vue组件为例
// 引入store/app.js(也就是store文件夹下的app.js导出的整个store)
import AppStore from "../store/app";
// 从app.js导出的整个store文件实例出一个hook store(名字自定义，大多以use开头)
const useAppstore = AppStore();
// 标签中使用
// 注意：由于pinia在用defineStore实例出新store时是以对象的形式定义的，又因为store内部的值都是存储在自身proxy target值里，所以取值直接对象的形式获取使用
<template>
<div>{{ store.count }}</div>
</template>
4、storeToRefs 赋予导出的store下的state数据为响应式proxy
上面的标签中使用数据未免有些不美观,数据一多就很难看
// 示例
<template>
<div>{{ store.count }}</div>
<div>{{ store.XXX }}</div>
...
</template>
同时如果在script中解构出的state数据是不具备响应式的
// 示例
const { count } = useAppstore
<template>
<div>{{ count }}</div>
</template>
但我们使用pinia状态管理主要就是为了让一个页面修改公用数据多个页面同个数据也跟着修改，所以storeToRefs登场啦
// 以HelloWorld.vue组件为例
// 引入
import { storeToRefs } from "pinia";
// 将我们实例化的useAppstore放进去然后解构，解构出的state数据即为响应式
const { count } = storeToRefs(useAppstore);
5、怎么证明它就是响应式的，store名.$subscribe
params: storeId这个参数为当前使用的store名称
state: 这个是store内部的state数据，你可以通过它观察到该store的state内部的数据的更改状态
注意:定义完会自动调用，所以不需要主动调用
// 示例
const testSubscribe = userStore.$subscribe((params, state) => {
console.log(params, "params");
console.log(state, "state");
});
6、重置store中的所有state数据 this.$reset()
// 以app.js这个store为例
actions: {
resetData() {
this.$reset()
}
}
// 其他组件使用 以HelloWorld为例
/*
AppStore这个是根据你引入的store实例化后的名称
import useAppStore from "../store/app";
const AppStore = useAppStore();
*/
const handReset = () => {
AppStore.resetData()
}
7、不同store之间的数据互访
例如在app.js的store中想要使用user.js的store中的数据count
实现过程：
1、在app store顶部引入user store
import userStore from "./user";
2、在app中需要用到的地方将user store实例出一个对象useStore,
直接useStore.count的取值方式即可拿到user store中的count值。
提示：app可以获取整个user store中的所有东西(state,getters,actions)
核心：1、引入第三方store 2、实例化引入store 3、直接使用
app store下的actions中
addCount() {
const useStore = userStore();
this.count += useStore.count;
}
