pinia核心模块----store

目录

一、概念

二、定义store

1、首先store目录下创建user.ts文件，主要用来存放与user相关的store。

2、页面中使用

一、概念

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>