【vue】Pinia-2 安装Pinia，使用store

tao355667

已于 2024-04-13 18:44:35 修改

阅读量540

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Javascript基础+Vue 文章标签： vue.js 前端 javascript

于 2024-04-13 18:39:21 首次发布

本文链接：https://blog.csdn.net/m0_63070489/article/details/137721154

Javascript基础+Vue 专栏收录该内容

33 篇文章

订阅专栏

在这里插入图片描述

1. 安装Pinia

在项目路径下执行npm install pinia

在这里插入图片描述
在package.json中查看

在这里插入图片描述

2. 使用store

在main.js中添加

import { createPinia } from 'pinia'
const pinia = createPinia()

修改createApp方法
最后示例如下（三处修改）

import { createApp } from 'vue'
//修改1
import { createPinia } from 'pinia'

import App from './App.vue'

//修改2
const pinia = createPinia()

// createApp(App).mount('#app')
//修改3
const app = createApp(App)
app.use(pinia)
app.mount('#app')

在这里插入图片描述

程序

stores/web.js

import { reactive,ref } from "vue";
import { defineStore } from "pinia";



//命名规范：前面加use，后面加Store
export const useWebStore = defineStore("web", ()=>{
    const web = reactive({
        title: "abcdfg",
        url: "https://www.abcdfg.com",
    })

    const users = ref(1000)
    
    const userAdd=()=>{
        users.value+=1
    }

    return {
        web,
        users,
        userAdd
    }
});

App.vue

<template>
  <p>{{ webStore.web.title }} </p>
  <p>{{ webStore.web.url }} </p>
  <p>{{ webStore.users }} </p>


  <button @click="webStore.userAdd()">Add User</button>

</template>

<script setup>
import { reactive, ref, toRef, toRefs } from 'vue';
import { useWebStore } from './stores/web';


const webStore = useWebStore()

console.log(webStore.web)
console.log(webStore.users)

</script>

<style lang="scss" scoped></style>