A recent development project using Vue3.x introduced vuex as unified state management and found that the development extension of the VUE browser did not display vuex data, resulting in an inability to debug. Then to github search found this github.com/vuejs/vue-d… , the problem from 2020-09-03 to now, has not really solved!

Vuex debugging

Currently there is only one createLogger API that can be debugged on the console,

import { createStore, createLogger } from "vuex";

export default createStore({
  / /...
  plugins: [createLogger()],
});
Copy the code

However, this would make the console look terrible! When you have multiple status updates, you can no longer get your own information quickly and efficiently

However, there is another good thing found in this issue — Harlem, which is also the focus of this article

harlem

Harlem is an API for simple functions like create, read, and state change. At its core, it uses vue3’s built-in Reactive and Computeds apis. That means if you know how to use Vue3, you’ll know how to use Harlem.

Since no other library has been introduced (just Vue), it is small enough that it also provides support for Vue development extensions.

** How to use **

The use of storing

1. Install

npm install @harlem/core
Copy the code

2. Register the Harlem plug-in for the Vue application instance.

import App from "./app.vue";
import Harlem from "@harlem/core";

createApp(App).use(Harlem).mount("#app");
Copy the code

3. Create a Store and write getters/mutations

import { createStore } from "@harlem/core";

const STATE = {
  firstName: "John".lastName: "Smith"};const{ getter, mutation, ... store } = createStore("user", STATE);

export const state = store.state;

export const fullName = getter(
  "fullname".(state) = > `${state.firstName} ${state.lastName}`
);

export const setFirstName = mutation("setFirstName".(state, payload) = > {
  state.firstName = payload || "";
});

export const setLastName = mutation("setLastName".(state, payload) = > {
  state.lastName = payload || "";
});
Copy the code

4. Use it in applications

<template>
    <div class="app">
        <h1>Hello {{ fullName }}</h1>
        <input type="text" v-model="firstName" placeholder="First name">
        <input type="text" v-model="lastName" placeholder="Last name">
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    computed
} from 'vue';

import {
    state,
    fullName,
    setFirstName,
    setLastName
} from './stores/user';

export default defineComponent({

    setup() {
        const firstName = computed({
            get: () = > state.firstName,
            set: setFirstName
        });

        const lastName = computed({
            get: () = > state.lastName,
            set: setLastName
        });

        return{ firstName, lastName, fullName }; }});</script>
Copy the code

Develop extended use

We need to install extensions

npm i @harlem/plugin-devtools -D
Copy the code

Then reference it in the file

import App from "./app.vue";
import Harlem from "@harlem/core";

import createDevtoolsPlugin from "@harlem/plugin-devtools";

import { createApp } from "vue";

function start() {
  let plugins = [];

  if (process.env.NODE_ENV === "development") {
    plugins.push(
      createDevtoolsPlugin({
        label: "State",})); }return createApp(App)
    .use(Harlem, {
      plugins,
    })
    .mount("#app");
}

start();
Copy the code

It has been copied in harlem official document, you can check it by yourself

conclusion

In my own switch to use, almost no learning costs, and greatly reduced the size of the application, we hurry to try. (The first method is recommended for old project reconstruction)