使用 Vue + Electron 构建桌面应用

Posted at 2022-12-01 Coding  前端 vue 

创建应用

vue create ProjectName   # 使用 vue-cli 创建 vue 项目
cd ProjectName           # 配置完成后进入项目目录
vue add electron-builder # 使用 vue-cli 为项目安装 electron-builder

问题集锦

Pinia 使用过程中的问题

配置 Pinia

引入

// @/src/main.js
import { createPinia } from "pinia";
createApp(App)
  .use(createPinia()) /* ... */
  .mount("#app");

配置 index.js

// @/src/store/index.js
import { defineStore } from "pinia";

export const DevicesStore = defineStore("Devices", {
  state: () => ({
    devicesList: [],
    isConnected: new Map(),
  }),
  // Getters 获取内容
  getters: {
    getDevicesList: (state) => state.devicesList,
    getIsConnected: (state) => (ip) => {
      // 获取内容时传入参数，以在map中匹配
      return state.isConnected.get(ip);
    },
  },
  // Setters 写入内容
  actions: {
    setDevicesList(state) {
      this.devicesList = state;
    },
    setIsConnected(ip, val) {
      this.isConnected.set(ip, val);
    },
  },
});

调用

store.setIsConnected(ip, false);
store.getIsConnected(item);

store.setDevicesList(devices);
store.getConnectedIP;

在组件中订阅 store 里的状态

import { DevicesStore } from "@/store/index";
const store = DevicesStore();
const subscribeDevices = store.$subscribe(
  (mutation, state) => {
    console.log(mutation);
    console.log(state);
  },
  { detached: false }
); // detached:false 表示组件卸载时删除订阅