vue3项目中pinia状态管理器的使用

安装

yarn add Pinia
// 或
npm install Pinia

main.js配置

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

const app = createApp(App);

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

定义仓库  store.js

import { defineStore } from 'pinia'
import { ref, computed } from 'vue';

export const mainStore = defineStore('main', () => {
  const scrollTop= ref(0);
  const upScrollTop = (num) => {
    scrollTop.value = num
  }
  return { scrollTop,upScrollTop };
});

引入仓库，调用或赋值等操作

<template>
  <div>仓库数据：{{store.scrollTop}}</div>
</template>

<script setup>
import { mainStore } from "@/common/store.js";
const store = mainStore();

//获取仓库数据
console.log(store.scrollTop)

//赋值
store.scrollTop = 1000;

//调用仓库中方法
store.upScrollTop(888);
</script>

上一篇：vue3.2，二次封装elementPlus使用了v-model的组件

下一篇：vue开发，配置环境变量