Vue3使用pinia

最新推荐文章于 2024-10-16 18:35:07 发布

YYTX_YS

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量93

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/YYTX_YS/article/details/129242875

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文演示了如何在Vue项目中安装和使用Pinia进行状态管理。首先通过pnpm安装Pinia，然后挂载到应用中。接着创建src/store文件夹，定义名为test的store，包含state、getter和action。在组件中，使用storeToRefs和actions来交互数据，实现数据的修改、重置和通过action调用方法。

摘要由CSDN通过智能技术生成

安装Pinia依赖

pnpm install pinia

挂载pinia

import { createApp } from 'vue';
import './style.css';
import router from './router';
// 引用Pinia
import { createPinia } from 'pinia';
import App from './App.vue';
// 创建Pinia
const pinia = createPinia();
 
const app = createApp(App);
app.use(router);
// 挂载Pinia
app.use(pinia);
app.mount('#app');

使用pinia配置数据

创建/src/store文件夹，在store文件夹下创建各种store,如下test.ts

import { defineStore } from 'pinia';
 
export const useTestStore = defineStore('test', {
    // state属性
    state: () => {
        return {
            name: '杨xx',
            sex: '男',
        };
    },
    // getters
    getters: {
        getNameData: (state) => {
            return '获取到的名字' + state.name;
        },
    },
    // actions
    actions: {
        saveNameData(name: string) {
            this.name = name;
        },
    },
});

调用示例

<template>
    <!-- getter 调用 -->
    <div>{{ testStore.getNameData }}</div>
    <div>{{ sex }}</div>
    <button @click="changeName">change</button>
    <button @click="reset">reset</button>
    <button @click="action">action</button>
</template>
 
<script setup lang="ts">
import { useTestStore } from '../store/test';
import { storeToRefs } from 'pinia';
// 使用store
const testStore = useTestStore();
let { name, sex } = storeToRefs(testStore);
// 修改数据
const changeName = () => {
    name.value = '唐**';
};
// 重置回初始数据
const reset = () => {
    testStore.$reset();
};
// 调用action
const action = () => {
    testStore.saveNameData('陈某');
};
</script>
 
<style scoped lang="postcss"></style>