vue3安装pinia

最新推荐文章于 2024-10-06 14:15:37 发布

就叫飞六吧

最新推荐文章于 2024-10-06 14:15:37 发布

阅读量158

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52236586/article/details/142725353

版权

vue3安装pinia

在全新的Vue 3项目中安装Pinia并进行基础使用。以下是步骤:

安装Pinia

在项目根目录下运行以下命令:

npm install pinia

在main.js中配置Pinia

打开main.js文件,添加以下代码:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

创建一个Store

在src目录下创建一个stores文件夹,然后创建一个新文件,例如counter.js:

import { defineStore } from 'pinia'

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

在组件中使用Store

在任何Vue组件中,您可以这样使用刚创建的store:

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>Double Count: {{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment">Increment</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter'

const counterStore = useCounterStore()
</script>