目录
1、首先store目录下创建user.ts文件,主要用来存放与user相关的store。
一、概念
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>