pinia核心模块----store
目录
[TOC]
一、概念
store简单来说就是数据仓库的意思，我们数据都放在store里面。当然你也可以把它理解为一个公共组件，只不过该公共组件只存放数据，这些数据我们其它所有的组件都能够访问且可以修改。
二、定义store
1、首先store目录下创建user.ts文件，主要用来存放与user相关的store。
// 引入defineStore 方法
pinia中使用defineStore定义store
- 第一个参数是应用程序中 store 的唯一 id
- 第二个参数是是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
- 返回一个函数使用use+模块名命名
**// 其它配置项
- 定义当前的模块的state
- state是一个函数，必须有返回值
- 返回值就是这个模块的状态**
// 引入defineStore 方法
import { defineStore } from "pinia";
/**
* pinia中使用defineStore定义store
* 第一个参数是应用程序中 store 的唯一 id
* 第二个参数是是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
*
* 返回一个函数使用use+模块名命名
*/
export const useUserStore = defineStore("user", {
// 其它配置项
/**
* 定义当前的模块的state
* state是一个函数，必须有返回值
* 返回值就是这个模块的状态
* @returns
*/
state() {
// 返回age为1
return {
/**
* 年龄
*/
age: 1,
};
},
});
2、页面中使用
// 使用userStore 并返回定义模块的实例
可以直接使用获取属性并修改，并且也会同步重新渲染页面
-
注意：不能直接从store中解构值
-
这样会破坏响应式解构，
-
如果要结构可以使用 storeToRefs
<template>
<div>
<!-- 页面上可以直接使用 -->
你好，我是pinia--{{ age }}
<button @click="add">+1</button>
</div>
</template>
<script setup lang="ts">
// 引入定义的userStore模块
import { storeToRefs } from "pinia";
import { useUserStore } from "./store/user";
// 使用userStore 并返回定义模块的实例
const userStore = useUserStore();
// const add = () => {
// userStore.age+=1
// };
/**
* 注意：不能直接从store中解构值
* 这样会破坏响应式解构，
*/
// 错误
// let { age } = useUserStore();
// 如果要结构可以使用 storeToRefs
let { age } = storeToRefs(userStore);
// 可以直接使用获取属性并修改，并且也会同步重新渲染页面
const add = () => {
age.value+=1
};
</script>
