Pinia初始化仓库Store

简介: Pinia初始化仓库Store

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:{
     }
})


相关文章
|
3月前
|
存储
(pinia-plugin-persistedstate)pinia 持久化存储
(pinia-plugin-persistedstate)pinia 持久化存储
398 1
|
9月前
|
存储 资源调度 JavaScript
在Vue 3项目中引入Pinia进行状态管理并持久化存储
在Vue 3项目中引入Pinia进行状态管理并持久化存储
331 0
|
9月前
|
前端开发 JavaScript BI
轻松搞定vue3+Pinia-2-修改state-patch-actions
轻松搞定vue3+Pinia-2-修改state-patch-actions
199 0
|
JavaScript 前端开发 数据安全/隐私保护
Vue封装组件并发布到npm仓库
前言 使用Vue框架进行开发,组件封装是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用,甚至我们可以直接从npm仓库下载别人封装好的组件来进行使用,比如iview、element-ui这一类的组件库。但是每个公司的业务场景可能不同,开发人员还是得必须封装自己得组件,如果换了一个项目,那么我们就只能复制组件代码到新的项目里面去了,这样稍显麻烦,其实我们可以将组建上传到npm仓库,要用的时候可以直接从npm安装使用。 总结下来有两点好处: 方面使用,任何项目无缝衔接。 可作为开源项目,积累经验。
678 0
Vue封装组件并发布到npm仓库
|
11天前
|
存储 资源调度 JavaScript
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
|
1月前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
37 1
|
3月前
|
存储 JavaScript 前端开发
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
|
10月前
|
缓存 JavaScript
什么是 @ngrx/store 开发包中的 MemoizedSelector
什么是 @ngrx/store 开发包中的 MemoizedSelector
|
11月前
|
JavaScript 前端开发
vue 创建自己内部vuex方法
vue 创建自己内部vuex方法