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


相关文章
|
6月前
|
JavaScript Android开发
【问题篇】打包Vue-cli3创建的vue项目成App的apk文件
【问题篇】打包Vue-cli3创建的vue项目成App的apk文件
121 0
|
6月前
|
存储 JavaScript 前端开发
vue3使用pinia 实现权限code存取
在本文我们一开始了解了pinia是什么以及如果安装使用。接着结合使用pinia实现菜单权限控制的综合实例,来进一步了解pinia的使用。
125 0
|
前端开发 JavaScript BI
轻松搞定vue3+Pinia-2-修改state-patch-actions
轻松搞定vue3+Pinia-2-修改state-patch-actions
240 0
|
存储 资源调度 JavaScript
在Vue 3项目中引入Pinia进行状态管理并持久化存储
在Vue 3项目中引入Pinia进行状态管理并持久化存储
461 0
|
26天前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
49 1
|
JavaScript 前端开发 数据安全/隐私保护
Vue封装组件并发布到npm仓库
前言 使用Vue框架进行开发,组件封装是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用,甚至我们可以直接从npm仓库下载别人封装好的组件来进行使用,比如iview、element-ui这一类的组件库。但是每个公司的业务场景可能不同,开发人员还是得必须封装自己得组件,如果换了一个项目,那么我们就只能复制组件代码到新的项目里面去了,这样稍显麻烦,其实我们可以将组建上传到npm仓库,要用的时候可以直接从npm安装使用。 总结下来有两点好处: 方面使用,任何项目无缝衔接。 可作为开源项目,积累经验。
718 0
Vue封装组件并发布到npm仓库
|
4月前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
1521 1
Vue-Cli的生命周期写法,methods要与data()平级,生命周期函数要与methods平级
Vue-Cli的生命周期写法,methods要与data()平级,生命周期函数要与methods平级
|
6月前
|
存储 JavaScript 前端开发
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程