DOCSEARCHbyAlgolia
Submit Docs

A7BZ Blog

website·Indexed 31 days ago

https://blog.a7bz.cn

A technical blog featuring notes and tutorials on Vue 3, Pinia, C# 12, ROS, Ubuntu, and Electron. Content includes practical guides on Vue component encapsulation, route caching, asynchronous emit implementations, Windows auto-start methods, and ROS device management.

Tokens
34.3K
Snippets
143
Records
209
Agent score
48%

What's inside A7BZ Blog

  1. Overview of C# 12 features in .NET 8

    C# 12, released in November 2023 as part of the .NET 8 ecosystem, introduces features designed to improve development efficiency, simplify code, and enhance type safety. Key additions include Primary Constructors.

  2. Overview of Ventoy multi-boot USB tool

    Ventoy is an open-source tool used to create a multi-boot USB drive. Unlike traditional tools, it allows users to simply copy multiple ISO files (Windows, Linux, BSD, and tool disks) onto the USB drive without needing to extract contents or reformat the drive for each new image. It supports both Legacy BIOS and UEFI boot modes and works with FAT32, exFAT, NTFS, and ext4 file systems.

  3. Use Pinia for state management in Vue 3

    Pinia is the officially recommended state management library for Vue 3, replacing Vuex. It provides a more concise API, superior TypeScript support, and a more flexible architecture by removing the need for mutations.

  4. Understand the Same-Origin Policy (SOP)

    The Same-Origin Policy is a core browser security feature that prevents scripts from accessing resources from a different origin. Two URLs have the same origin if their protocol, domain, and port are all identical. If any of these three elements differ, the request is considered cross-origin and will be blocked by the browser unless the server explicitly allows it via CORS.
    // Base Origin: https://www.example.com:8080

// Cross-origin examples:
// https://api.example.com:8080     - Different domain
// https://www.example.com:3000     - Different port
// http://www.example.com:8080      - Different protocol

  5. Manage state in Vue 3 using Pinia

    Pinia is the officially recommended state management library for Vue 3, replacing Vuex. It provides a more concise API, superior TypeScript support, and a more flexible architecture by removing the need for mutations.

  6. Understand Vue 3 attrs for component encapsulation

    attrs (accessed via $attrs in templates) contains all attributes and event listeners passed from a parent component that are NOT declared as props or emits in the child component. This is highly useful for creating wrapper components that need to support all native attributes of an underlying HTML element or third-party component without manual mapping.

  7. Pinia Best Practices and Pitfalls

    Follow these guidelines to maintain a scalable and performant Pinia architecture:

    1. Avoid Overusing Stores: Only put global/application-level state (e.g., user auth, theme) in stores. Component-specific state (e.g., form input values, modal visibility) should remain inside the component.
    2. Prevent Circular Dependencies: Avoid importing one store inside another store's definition. Instead, instantiate multiple stores within the Vue component where they are needed.
    3. Selective Persistence: Do not persist the entire store state. Use the paths option in the persistence configuration to only save essential keys to storage.
    // Recommended selective persistence
persist: {
  paths: ["user", "theme", "cart.items"],
}

  8. Implement asynchronous emits in Vue

    While standard $emit in Vue is synchronous, asynchronous emits are necessary when a trigger must occur after an asynchronous operation completes, during the next DOM tick, or after a component has been destroyed.

  9. Configure and compile Xsens ROS driver workspace

    After installing the MT Software Suite, the ROS driver is located in /usr/local/xsens. It must be copied to a ROS workspace and compiled.

    Critical Step: You must compile the xspublic library manually before running catkin_make for the entire workspace, otherwise the build will fail.

    # Create workspace and copy driver
mkdir -p ~/app/ws/imu_ws/src/
cp -r /usr/local/xsens/xsens_ros_mti_driver/ ~/app/ws/imu_ws/src/

# Navigate to workspace
cd ~/app/ws/imu_ws

# 1. Compile xspublic library first
pushd src/xsens_ros_mti_driver/lib/xspublic && make && popd

# 2. Compile the ROS workspace
catkin_make

  10. Stream and view ROS images via web_video_server

    To stream images, first start your camera node, then launch the web_video_server. You can view the stream from any device on the same local network by navigating to the server's IP address and the configured port in a web browser. The web interface will list available image topics for selection.
    # 1. Start your camera node (example: rosrun camera_package camera_node)

# 2. Start the web video server
source ./devel/setup.bash
roslaunch web_video_server web_video_server.launch

    3. Access via browser:

    http://<SERVER_IP>:<PORT>

    Example: http://192.168.1.2:7653

  11. Write mathematical formulas and footnotes

    The platform supports LaTeX-style mathematical formulas for both inline and block-level display, as well as footnotes for citations.
    Inline formula: $E = mc^2$

Block formula:
$$
\int_{a}^{b} f(x) dx = F(b) - F(a)
$$

Footnote text[^1].

[^1]: This is the footnote content.

  12. Implement asynchronous emit in Vue

    Standard $emit in Vue is synchronous. Asynchronous emit implementations are useful for scenarios where an event must be triggered after an asynchronous operation completes, ensured to trigger in the next tick, or needs to be triggered after a component has been destroyed.