用沙盒游戏的方式打开Vue

引言

在学习的道路上，我很喜欢用类比法来帮助自己更加充分的理解知识，它不仅可以增加学习的趣味性，还可以方便我记忆。今天我将Vue框架类比成沙盒游戏，将它分享出来，便于我以后复习，也希望能帮助到后续在学习Vue框架的小伙伴，帮助初学Vue的你对框架有更深刻的认知。

一、Vue世界的介绍

                把 vue 世界类比成沙盒类世界，我们前端程序员就是这个世界的造物主。

                对于 main.js文件，即主世界，我们可以在主世界创建我们想要的房子，App.vue 即是一个例子，相应的，在 App.vue 注册的各个组件，可以相类比成各个房间，比如，在卧室.vue 中可以看到子组件床.vue，而我们可以通过router.js--门这一个媒介，切换到厨房组件，则可以看到锅、碗、瓢、盆.vue，还可以使用函数烹饪.js 完成食物数据的处理 。

                当然，每个房间都有窗户，这就是我们封装好的通用组件--窗.vue，它通过 Props 接收配置，比如窗户的尺寸 ( :size="large" )、样式 ( :style="modern" )，从而在不同房间（父组件）里呈现出不同的形态。

                而对于 pinia，他可以理解为国家，管理着我们的状态，比如银行资金，违法记录等等，通过特定的场所获取数据判断条件即可，类比出境时：海关组件从国家获取全局数据，如果是逃犯则不通过。

二、Vue生态与沙盒世界

三、一些具体的说明

"Pinia/Vuex状态管理"：

• ​State (状态)​​：就是国家管理的各种数据，如全球金币总量 (globalMoney)、所有玩家的违法记录 (crimeRecords)。

• ​Getters (获取器)​​：像一种查询服务。例如，一个名为 isWanted 的 Getter 可以帮你查询某位玩家是否有违法记录（根据身份证号计算得出）。

• ​Actions (动作)​​：是提交给政务系统处理的申请。比如，你要申请一笔贷款 (applyForLoan)，这是一个异步操作，Action 会帮你与银行服务器（后端API）交互，成功后更新国家的金币状态。

// stores/crimeRecord.js (国家违法记录管理局)
import { defineStore } from 'pinia';

export const useCrimeStore = defineStore('crime', {
  state: () => ({
    records: [] // 所有违法记录
  }),
  getters: {
    isWanted: (state) => (playerId) => {
      return state.records.some(record => record.playerId === playerId);
    }
  },
  actions: {
    async fetchRecords() {
      // 异步动作：从服务器获取最新违法记录列表
      const response = await fetch('/api/crime-records');
      this.records = await response.json();
    }
  }
});

<!-- BorderCheckpoint.vue (海关组件) -->
<template>
  <div>
    <p>玩家 {{ playerId }} 的出境申请：{{ canPass ? '通过' : '拒绝' }}</p>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useCrimeStore } from '@/stores/crimeRecord';

const props = defineProps(['playerId']);
const crimeStore = useCrimeStore();

// 直接向国家查询此人是否在通缉名单上
const canPass = computed(() => !crimeStore.isWanted(props.playerId));
</script>

当一个“海关组件”需要判断某人能否出境时，它不需要从“省、市、区”层层上报数据，而是直接向中央政务系统（Pinia Store）​​ 查询 isWanted Getter 即可。

此外：

• "厨房.vue"与"卧室.vue"​​：这些是路由组件或页面级组件。它们通过 Vue Router 这个“传送门网络”进行切换。

• ​​"烹饪.js"​：这可以类比为一个 ​Composables​（Vue 3 的组合式函数）。它不是界面的一部分，而是一套可复用的“烹饪逻辑”（数据处理逻辑），可以被“厨房.vue”导入并使用，用来处理“食物数据”

四、拓展--插件系统类比天气系统或物理引擎

Vue插件的基本结构：

一个 Vue 插件本质上是一个暴露 install 方法的对象。当你在主世界（通常是 main.js）中通过 Vue.use() 使用它时，这个 install 方法会被调用，从而赋予整个 Vue 应用新的能力。

// 插件基本结构
export default {
  install(Vue, options) {
    // 在这里扩展Vue的功能
  }
}

一、创建天气系统

天气系统就像是沙盒世界的全局环境状态，它会影响整个世界的表现（比如不同房间的窗户看到的景色、角色行为等）。

1. ​定义插件与状态管理​：通常需要使用一个状态管理库（如 Pinia）来集中管理天气状态。

2. ​提供全局方法与属性​：例如，提供改变天气的方法。

3. ​在组件中注入依赖​：让组件能够获取天气状态并对其变化作出响应。

// weather-system.js
import { createPinia } from 'pinia'; // 假设使用Pinia进行状态管理

// 定义一个Pinia store来管理天气状态
const useWeatherStore = defineStore('weather', {
  state: () => ({
    currentWeather: 'sunny', // 默认晴天
    temperature: 25
  }),
  actions: {
    setWeather(weather, temp) {
      this.currentWeather = weather;
      this.temperature = temp;
      // 可以在这里触发一些全局事件或副作用
    }
  }
});

export default {
  install(Vue, options) {
    // 如果尚未安装Pinia，可以在这里初始化并应用到Vue实例上
    const pinia = createPinia();
    // 注意：通常Pinia会在main.js中全局安装，这里假设在插件内部处理只是为了示例的完整性
    // 更常见的做法是在插件内部依赖已经存在的Pinia实例或其它状态管理机制
    // 提供全局方法
    Vue.prototype.$changeWeather = function(weatherType, temp) {
      const store = useWeatherStore();
      store.setWeather(weatherType, temp);
    };

    // 提供全局访问天气状态的只读属性或方法（可选，也可以通过直接导入store使用）
    Vue.prototype.$getCurrentWeather = function() {
      const store = useWeatherStore();
      return { weather: store.currentWeather, temp: store.temperature };
    };

    // 也可以注册一个全局混入，让每个组件都能方便地访问天气状态
    Vue.mixin({
      computed: {
        $weather() {
          const store = useWeatherStore();
          return store.currentWeather;
        },
        $temperature() {
          const store = useWeatherStore();
          return store.temperature;
        }
      }
    });
  }
};

在主世界（main.js)中安装：

import { createApp } from 'vue';
import { createPinia } from 'pinia'; // 引入Pinia
import App from './App.vue';
import WeatherSystem from './plugins/weather-system';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia); // 先安装Pinia
app.use(WeatherSystem); // 再安装天气插件，插件内部可能依赖Pinia

app.mount('#app');

在房间（组件）中使用天气系统：

<!-- SunnyRoom.vue -->
<template>
  <div>
    <h2>阳光房</h2>
    <p>当前天气: {{ $weather }}, 温度: {{ $temperature }}°C</p>
    <p v-if="$weather === 'sunny'">阳光明媚，心情真好！</p>
    <p v-else-if="$weather === 'rainy'">下雨了，听听雨声吧。</p>
    <button @click="changeToRainy">下雨</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeToRainy() {
      this.$changeWeather('rainy', 18); // 调用插件提供的全局方法
    }
  }
};
</script>

在此我仅展示天气系统插件的代码演示，利用Vue插件系统，你可以像搭积木一样，不断为你的沙盒世界增添新的全局规则和功能，让这个世界更加丰富和真实！

五、总结

在Vue的学习中，我认为了解它、理解它、熟悉它、运用它，这个过程是必不可少的，而小时记忆中玩耍的我的世界Minecraft给了我不少Vue学习上的灵感，在这条道路上，我们前端就是ui界面的造物主，只要想做什么都可以实现，难道不像游戏一样好玩吗？所以，我们要在枯燥的知识储备道路上给自己一些学习的趣味性，人生亦如此。