无厘头 -- 基于vue 公用状态机，已用于放置类篮球卡牌Game

最新推荐文章于 2026-09-21 20:24:41 发布

原创最新推荐文章于 2026-09-21 20:24:41 发布 · 73 阅读

本内容遵循CC 4.0 BY-SA版权协议

引入 Piniaa

npm install pinia
# or yarn add pinia

或者

"dependencies": {
    "@ckpack/vue-color": "^1.4.1",
    "@element-plus/icons-vue": "^2.0.10",
    "axios": "^1.3.2",
    "element-plus": "^2.2.29",
    "lodash-es": "^4.17.21",
    "pinia": "^2.0.28",
    "vue": "^3.2.45",
    "vue-hooks-plus": "1.6.0-alpha.2",
    "vue-router": "^4.1.6",
    "vue3-moveable": "^0.18.1"
  },

完整 vue （公用状态）代码如下：

关键是用了 pinia 这个库，好像专门用于保存状态

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

export const usePageState = defineStore('pageState', () => {
  const pageTitle = ref('视频编辑（CcClip）');
  // 暗色模式
  const isDark = ref(localStorage.theme !== 'light');
  const isLoading = ref(localStorage.loadingPage === '1');
  const hideSubMenu = ref(localStorage.showSubmenu === '0');
  watchEffect(() => {
    console.log(`switch to ${isDark.value ? 'dark' : 'light'}`);
    localStorage.theme = isDark.value ? 'dark' : 'light';
    localStorage.loadingPage = isLoading.value ? '1' : '0';
    localStorage.hideSubMenu = hideSubMenu.value ? '1' : '0';
    document.documentElement.classList[isDark.value ? 'add' : 'remove']('dark');
  });

  // 属性宽度
  const attrWidth = ref(parseInt(localStorage.attrW || '320'));
  // 轨道高度
  const trackHeight = ref(parseInt(localStorage.trackH || '380'));
  watchEffect(() => {
    localStorage.attrW = attrWidth.value;
    localStorage.trackH = trackHeight.value;
  });

  return {
    hideSubMenu,
    isLoading,
    pageTitle,
    isDark,
    attrWidth,
    trackHeight
  };
});

调用方法

import { usePageState } from "../usePageState";
private store = usePageState();
console.log('ffff.isDark= ',this.store.isDark)

无厘头 - tsconfig.json 片段（支持 @别名）

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

多个Vue 文件可公用一个状态

例如，可用于当前金币，任务列表啊，和技能等级等等；

即使是列表，也是公用存储所有的数据，按照item _id 获取单个数据，再一行行显示；

没那么简单

import { useUserStore } from '@/stores/user'
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

// ❌ 这里会报错，因为 pinia 还没创建
const userStore = useUserStore()

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)

app.mount('#app')

也就是要初始化一下，之前一直是 AI 做的，所以根本不清楚

以为 import 即可用，不是的，要初始化

import { useUserStore } from '@/stores/user'
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)

// ✅ 在 app.use(pinia) 之后调用才安全
const userStore = useUserStore()