首页 > 其他分享 >vuejs3.0 从入门到精通——Pinia——Store 是什么?

vuejs3.0 从入门到精通——Pinia——Store 是什么?

时间:2023-11-14 10:37:03浏览次数:28  
标签:zh Pinia vuejs3.0 pinia 组件 全局 Store

Pinia —— Store 是什么?

https://pinia.vuejs.org/zh/getting-started.html#what-is-a-store

一、Store 是什么?

  Store (如 Pinia) 是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着全局状态。它有点像一个永远存在的组件,每个组件都可以读取和写入它。它有三个概念,state、getter和action,我们可以假设这些概念相当于组件中的datacomputedmethods

二、应该在什么时候使用 Store?

https://pinia.vuejs.org/zh/getting-started.html#when-should-i-use-a-store

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

  另一方面,你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据,例如,一个元素在页面中的可见性。

  并非所有的应用都需要访问全局状态,但如果你的应用确实需要一个全局状态,那 Pinia 将使你的开发过程更轻松。

标签:zh,Pinia,vuejs3.0,pinia,组件,全局,Store
From: https://www.cnblogs.com/zuoyang/p/17831044.html

相关文章

  • 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......
  • vue3中使用Pinia
    Pinia是一个用于Vue的状态管理库,类似Vuex,是Vue的另一种状态管理方案三大核心:state(存储的值),getters(计算属性),actions也可支持同步(改变值的方法,支持同步和异步)npminstallpinia@nextoryarnaddpinia@next模块化封装创建实例新建store/index.ts(src目录下新建store......