首页 > 其他分享 >vuejs3.0 从入门到精通——Pinia——定义Store

vuejs3.0 从入门到精通——Pinia——定义Store

时间:2023-11-14 15:14:31浏览次数:24  
标签:use 定义 defineStore vuejs3.0 store Pinia Store

定义Store

  Store 是用defineStore()定义的,它的第一个参数要求是一个独一无二的名字:

import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`,`useCartStore`,`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

  这个名字,也被用作id,是必须传入的, Pinia 将用它来连接 store 和 devtools。为了养成习惯性的用法,将返回的函数命名为use...是一个符合组合式函数风格的约定。

  defineStore()的第二个参数可接受两类值:Setup 函数或 Option 对象。

  

标签:use,定义,defineStore,vuejs3.0,store,Pinia,Store
From: https://www.cnblogs.com/zuoyang/p/17831607.html

相关文章

  • vuejs3.0 从入门到精通——Pinia——Store 是什么?
    Pinia——Store是什么?https://pinia.vuejs.org/zh/getting-started.html#what-is-a-store一、Store是什么? Store(如Pinia)是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着全局状态。它有点像一个永远存在的组件,每个组件都可以读取和写入它。......
  • Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系
    在Angular启用服务器端渲染(Server-SideRendering,SSR)后,当浏览器端访问这个Angular应用时,会涉及到一系列过程,包括初始化、数据获取、hydration(重新注水)和与NgRxStore之间的交互。下面我将详细介绍这些步骤:初始化应用:用户在浏览器中输入应用的URL。服务器端处理请求,生......
  • vuejs3.0 从入门到精通——Vuex 4.x —— Getter
    Vuex4.x——Getterhttps://vuex.vuejs.org/zh/guide/getters.html 有时候我们需要从store中的state中派生出一些状态,例如对列表进行过滤并计数:computed:{doneTodosCount(){returnthis.$store.state.todos.filter(todo=>todo.done).length}} 如......
  • vuejs3.0 从入门到精通——Vuex 4.x —— state
    Vuex4.x——statehttps://vuex.vuejs.org/zh/guide/state.html一、单一状态树 Vuex使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源(SSOT)”而存在。这也意味着,每个应用将仅仅包含一个store实例。单一状......
  • vuejs3.0 从入门到精通——Vuex
    Vuexhttps://vuex.vuejs.org/zh/一、Vue是什么? Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。1.1、什么是"状态管理模式"? 状态管理模式是一种在前端开发中管理......
  • vuejs3.0 从入门到精通——provide、inject、mixins、extends
    provide、inject、mixins、extends一、provide二、inject三、mixins四、extendshttps://cn.vuejs.org/api/options-composition.html#mixins 一个包含组件选项对象的数组,这些选项都将被混入到当前组件的实例中。interfaceComponentOptions{mixins?:ComponentOptio......
  • vuejs3.0 从入门到精通——动态组件
    动态组件一、App.vue<template><ul><!--使用ul标签替代了错误的url标签,用于展示列表--><liv-for='(item,index)intabList':key='index'@click="()=>{currentComponent.com=tabList[index].com}"><!--......
  • Vite4+Typescript+Vue3+Pinia 从零搭建(2) - tsconfig配置
    tsconfig配置项目代码同步至码云weiz-vue3-template关于tsconfig的配置字段可查看其他文档,如typeScripttsconfig配置详解tsconfig.json文件修改如下:{"compilerOptions":{"target":"ESNext",//将代码编译为最新版本的JS"useDefineForClassFields":tr......
  • Vite4+Typescript+Vue3+Pinia 从零搭建(1) - 项目初始化
    项目初始化项目代码同步至码云weiz-vue3-template前提准备1.node版本Node.js版本>=12,如果有老项目需要旧版本的,推荐用nvm管理node版本。PSC:\Users\Administrator>nvm--version1.1.11PSC:\Users\Administrator>nvmlist*16.20.2(Currentlyusing64-bit......
  • vuejs3.0 从入门到精通——Element Plus 组件库
    ElementPlus组件库一、ElementPlus 基于Vue3,面向设计师和开发者的组件库。二、完整导入https://element-plus.org/zh-CN/guide/quickstart.html#完整引入 如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。//main.tsimport{createApp}from'vu......