学习Pinia 第二章(初始化仓库Store)

简介: 这个名称,也称为id,是必要的,Pania 使用它来将商店连接到 devtools。将返回的函数命名为use...是可组合项之间的约定,以使其使用习惯。

1.新建一个文件夹Store

2.新建文件[name].ts

3.定义仓库Store


import { defineStore } from 'pinia'


4.我们需要知道存储是使用定义的defineStore(),并且它需要一个唯一的名称,作为第一个参数传递


我这儿名称抽离出去了


新建文件store-namespace/index.ts


export const enum Names {
    Test = 'TEST'
}


store 引入


import { defineStore } from 'pinia'
import { Names } from './store-namespace'
export const useTestStore = defineStore(Names.Test, {
})


这个名称,也称为id,是必要的,Pania 使用它来将商店连接到 devtools。将返回的函数命名为use...是可组合项之间的约定,以使其使用习惯。


5.定义值

State 箭头函数 返回一个对象 在对象里面定义值


import { defineStore } from 'pinia'
import { Names } from './store-namespce'
export const useTestStore = defineStore(Names.Test, {
     state:()=>{
         return {
             current:1
         }
     }
})


import { defineStore } from 'pinia'
import { Names } from './store-namespce'
export const useTestStore = defineStore(Names.Test, {
     state:()=>{
         return {
             current:1
         }
     },
     //类似于computed 可以帮我们去修饰我们的值
     getters:{
     },
     //可以操作异步 和 同步提交state
     actions:{
     }
})


目录
相关文章
|
5月前
|
存储 JavaScript 中间件
Nuxt3 实战 (一):初始化项目
这篇文章介绍了Nuxt框架的基本信息,包括什么是Nuxt以及Nuxt3的优点。文章还介绍了Nuxt3的一些特点,如服务端渲染和静态站点生成、模块化、文件系统路由等。此外,文章还提供了项目安装的步骤和目录结构。最后,文章提到了下一步计划,即配置 Eslint、Prettier、Husky、lint-staged、commitlit项目提交规范的过程。
154 3
Nuxt3 实战 (一):初始化项目
|
3月前
|
监控 JavaScript Serverless
函数计算产品使用问题之如何部署一个未构建的Vue项目,并实现从Gitee仓库自动同步更新
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
4月前
|
资源调度 JavaScript 前端开发
【前端 - Vue】Vuex基础入门,创建仓库的详细步骤
【前端 - Vue】Vuex基础入门,创建仓库的详细步骤
|
4月前
|
存储 JavaScript 前端开发
vuex仓库的五大属性、辅助函数与使用方法,史上最详细!
vuex仓库的五大属性、辅助函数与使用方法,史上最详细!
|
5月前
|
存储 JavaScript 前端开发
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
|
JavaScript
Vue框架学习(第十三课)Vuex状态管理中的store和state属性
Vue框架学习(第十三课)Vuex状态管理中的store和state属性
160 0
|
存储 JavaScript 数据管理
Vue —— 进阶 Vuex(零)(概念、工作原理、环境搭建、基本使用、getters)
Vue —— 进阶 Vuex(零)(概念、工作原理、环境搭建、基本使用、getters)
学习Pinia 第四章(解构store)
修改Test current 解构完之后的数据不会变
131 0
学习Pinia 第四章(解构store)
|
前端开发
前端学习笔记202304学习笔记第十五天-vue3.0-创建es-counter组件
前端学习笔记202304学习笔记第十五天-vue3.0-创建es-counter组件
53 0
学习Pinia 第三章(State)
$state您可以通过将store的属性设置为新对象来替换store的整个状态
65 0