pinia的使用

最新推荐文章于 2025-05-20 11:49:33 发布

原创最新推荐文章于 2025-05-20 11:49:33 发布 · 660 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

一、安装Pinia

可以通过npm或yarn进行安装

npm install pinia

或者：

yarn add pinia

二、在main.js中引入并注册Pinia：

在项目的入口文件（如main.js或main.ts）中，导入createPinia方法，并创建一个Pinia实例，然后将其注册到Vue应用中。

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

     const pinia = createPinia();
     const app = createApp(App);
     app.use(pinia);
     app.mount('#app');

三、创建Store：

在项目的src/store目录下新建一个文件（如index.js或index.ts），使用defineStore函数定义Store。

     import { defineStore } from 'pinia';

     export const useStore = defineStore('store', {
       state: () => ({
         counter: 0,
       }),
       actions: {
         increment() {
           this.counter++;
         },
       },
     });

这一步定义了Store的基本结构，包括状态（state）、计算属性（getters）和动作（actions）四、在组件中使用Store：

在需要使用Store的组件中，通过useStore函数导入Store实例，并在模板和脚本中使用Store中的数据和方法。

例：

     <template>
       <div>{{ store.counter }}</div>
       <button @click="store.increment">Increment</button>
     </template>

     <script setup>
     import { useStore } from '../store';

     const store = useStore();
     </script>