项目源码

项目源码-Vue3项目10-整合Pinia

2025年1月12日
hangzi

Last Updated on 2025年1月12日 by hangzi

整合Pinia

1、安装依赖

pnpm add pinia

2、新建stores目录，新建index.js文件

内容如下：


import {createPinia} from "pinia";

const store = createPinia();

// 全局注册 store
export function setupStore(app) {
    app.use(store);
}

export {store}

3、配置store插件


import {setupRouter} from "@/router/index";
import {setupStore} from "@/stores/index";

export default {
    install(app) {
        setupRouter(app);
        setupStore(app)
    }
}

4、配置插件

5、查看是否使用，打开浏览器开发工具

6、业务模块

在src/stores目录下新建一个modules目录,在modules目录下新建一个user.js模块

pinia使用-定义Store：

import {defineStore} from "pinia";
import { store } from "@/stores";

// 定义Store
const userStore = defineStore('user', ()=>{

});

export function useUserStore(){
    return userStore(store);
}

在 Setup Store 中：

ref() 就是 state属性
computed() 就是 getters
function() 就是 actions

src/stores/modules/user.js完整内容：

import {defineStore} from "pinia";
import { store } from "@/stores";

// 定义Store
const userStore = defineStore('user', ()=>{
    // state
    const user = ref({
        name: '张三',
        age: 18,
        sex: '男'
    });

    // getters
    const changeAge = computed(()=>{
        return user.value.age + 1;
    });

    // actions
    function changeName(val){
        user.value.name = val;
    }

    return {
        user,
        changeAge,
        changeName
    }
});

export function useUserStore(){
    return userStore(store);
}

在src/stores/index.js下配置user.js模块