首页 > 其他分享 >vue3中使用pinia

vue3中使用pinia

时间:2023-02-06 16:58:43浏览次数:55  
标签:count vue3 export useCounterStore pinia 使用 import store

包管理器安装

yarn add pinia
# 或者使用 npm
npm install pinia

在目录下创建store文件夹,并创建index.js文件

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
export * from './module'

模块化的话,就在store文件夹下再建一个module文件夹,创建一个index.js文件,用export * from './xxx'来引用

export * from './counter'
export * from './counter1'
export * from './counter2'
...

在引用的文件里创建Store就行了,比如counter

import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

在main.js里引用

import pinia from './store'
app.use(pinia)

在组件中使用

import { useCounterStore } from '@/store'
const store = useCounterStore ()
console.log(store)
console.log(store.count)

 

标签:count,vue3,export,useCounterStore,pinia,使用,import,store
From: https://www.cnblogs.com/lovewhatIlove/p/17094318.html

相关文章

  • vue3自动引入api
    1、问题:vue3使用setup的api,每次都要引入就很麻烦,有没有自动引入的方法,这样就不用那么麻烦2、方案:通过使用unplugin-auto-import/vite插件来自动引入vue的api3、实操:在vi......
  • vue3引入SvgIcon
    这里使用vite-plugin-svg-icons插件yarnaddvite-plugin-svg-icons-D#ornpmivite-plugin-svg-icons-D#orpnpminstallvite-plugin-svg-icons-D在vite.con......
  • vue3配置@文件系统路径
    1、问题:在项目中引用通常是相对路径,在复用代码模块的时候,没注意就很容易路径出错2、方案:通过vite设置resolve.alias来配置文件系统路径,在文件中就可以使用配置的路径,移动......
  • linux 命令: -exec 的使用
    linux中的exec命令,-exec后面跟的是linux的command命令,exec命令以分号结束‘;’,该分号前面要放反斜杠转义。find.-namejquery.js-execcat{}\;{}花括号代表......
  • NLP基础-准确分词(使用工具分词)
    关于NLP相关包安装配置,可以参考:​NLP工具包安装配置​​关于分词的原理可以参考:自然语言处理NLP-隐马尔科夫)1.加载字典来保证词可以分准对一些专业的名词来说,使用原有的词......
  • StopWatch使用
    Spring提供的StopWatch,可以用来检测代码的执行时间。可以代替longstart=System.currentTimeMillis();写法。importorg.springframework.util.StopWatchpublicclass......
  • 01linux查询io资源使用情况。
    1.执行top   2.执行第一个参数是间隔多少s,第二个参数是执行多少次vmstat 110  也可以执行vmstat1 每秒输出一次......
  • JSON Crack可视化展示 JSON 数据的开源软件使用方法
    进入官网https://jsoncrack.com/在vscode上获取进入直接下载到vscode再给权限即可打开一个json文件打开命令面板(Ctrl+Shift+P)输入jsoncrack-vscode.start即......
  • HIVE的几个使用技巧
    1.小表在前,大表在后,如果表很小就用mapjoin写JOIN的时候,将小表写在JOIN的前面,这样HIVE就会将小表载入内存,然后扫描大表。如果表足够的小,就使用mapjoin。2.设定map的并发数,保......
  • Hive使用TRANSFORM运行Python脚本总结
    1、Python环境设置可以使用addcachearchive的方法把tar.gz添加到分布式缓存,Hive会自动解压压缩包,但是目录名是和压缩包名称一样的;addcachearchive${env:my_workbenc......