`Store` 介绍

Store就是保存状态和业务逻辑的实体, 它没有绑定到组件树. 简单的说, 它是承载全局状态. 它就像一个总是存在的组件, 每个组件都可以读取和写入. 它有三个核心概念, state, getters和actions.

`Store`的应用场景

Store应该包含可以在整个应用程序中访问的数据。这包括在很多地方使用的数据，例如在导航栏中显示的用户信息，以及需要通过页面保存的数据，例如非常复杂的多步骤表单。

另一方面，你应该避免在store中包含可能托管在组件中的本地数据，例如，页面本地元素的可见性。

并不是所有的应用程序都需要访问全局状态，但是如果您需要，Pinia将使您的工作更轻松。

定义`Store`

首先, 需要在src目录下, 创建一个目录, 其名为stores, 用来存放Store文件, 并在这个目录下创建一个文件. 名为user.js, 用来存放用户信息的Store. Store 是使用 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递：

import { defineStore } from "pinia";

// 最好使用 use + 功能名 + Store 来命名, 这样对于便于后续的开发和维护 
// useUserStore 
export const useUserStore = defineStore('user', {
	// 第一个参数是应用程序中 store 的唯一 id
	// other options...
});

import { defineStore } from "pinia";

// 最好使用 use + 功能名 + Store 来命名, 这样对于便于后续的开发和维护 
// useUserStore 
export const useUserStore = defineStore('user', {
	// 第一个参数是应用程序中 store 的唯一 id
	// other options...
});

注意

第一个参数的 id，是必要的，Pinia 使用它来将 store 连接到 devtools。将返回的函数命名为 use... 是跨可组合项的约定，以使其符合你的使用习惯。

id: "user",
  state: () => ({
    name: '',
		lastName: '',
		age:
  }),
  getters: {
    fullName: (state) => state.name + state.lastName,
  },
  actions: {
    increment() {
      this.counter++;
    },
  },

id: "user",
  state: () => ({
    name: '',
		lastName: '',
		age:
  }),
  getters: {
    fullName: (state) => state.name + state.lastName,
  },
  actions: {
    increment() {
      this.counter++;
    },
  },

Store 介绍 ​

Store的应用场景 ​

定义Store ​

`Store` 介绍

`Store`的应用场景

定义`Store`