Практический опыт TS + Composition-Api

Vue.js

предисловие

Давненько не выводил, сегодня выведу один, чтобы облегчить человеку одиночество.

Хотя официально Vue3 еще не выпущен, с момента его выпуска прошло много времени, хотя его можно использовать для первых пользователей, окружающая среда не идеальна, а прокси не может быть полифиллен, поэтому он не может поддерживать IE11. это некоторые продукты 2C, использующие vue для разработки, даже если 3 отсутствует, обновление может быть временно невозможно из-за соображений пользователей IE. Также есть много продуктов, которые используют фреймворки Vue2.x, такие как ElementUI, и экология не идеальна за короткое время, и перевести на vue3 непросто.

К счастью, composer-api, основная функция vue3, поддерживает как основные версии vue2, так и vue3. Мы уже можем попробовать использовать состав-апи для разработки в некоторых небольших проектах Опыт в основном тот же, что и vue3, но мы не можем использовать новые функции, такие как телепорт и саспенс, но это не влияет на удовольствие от кодирования. После того, как Youda только что транслировал vue3 в прямом эфире, как и многие друзья, ему не терпелось поиграть, но он обнаружил, что такие фреймворки, как elementUI, не могут взаимодействовать с vue3 из-за деструктивных изменений, хотя в Интернете есть сообщения об использовании cdn для внедрения vue2.x. совместим с ElementUI, вы можете использовать vue3 для написания своих собственных компонентов, конечно, вы можете так играть, но это всегда заставляет людей чувствовать себя немного неловко. На самом деле нет необходимости гнаться за 3, потому что мы можем использовать решение vue2.x+composition-api для разработки, и оно совместимо с UI-фреймворками Vue2.x, такими как ElementUI.

Так как я единственный фронтенд в своей команде, то выбор технологии крайне свободен.Недавно я так же рефакторил проект с vue2.6+composition-api+ts,и сделал новый небольшой проект.Попробовал использовать это снова сегодня.План состоит в том, чтобы сделать библиотеку компонентов (извлеченные общедоступные функции превращаются в небольшую библиотеку компонентов), и я столкнулся с некоторыми проблемами, но, к счастью, они были решены, и проблемы, связанные с JSX, возникшие в предыдущем плане, были создан, так что я не мог сдержать его Возбужденные, давайте выйдем сегодня вечером и поделимся недавним опытом. (Вообще-то человек слишком одинок. Хочу пообщаться с барышней и не могу найти. Чувствую себя одиноко и неуютно, поэтому написал статью для поднятия настроения).

Если вы хотите делать хорошую работу, вы должны сначала заточить свои инструменты

Вот введение в создание проекта vue-cli.Если вы хорошо знакомы с ним, пожалуйста, пропустите его и посмотрите назад.

Создать проект

Без лишних слов давайте вместе создадим проект ts с vue-cli. Прежде чем начать, убедитесь, что у вас последняя версия vue-cli.

  1. vue create athenaСоздайте проект (назовите его Афина), богиня Афина более известна, поэтому я надеюсь, что скоро смогу найти свою богиню.
  2. Следующий выбор более важен.Если вы только добавили новые функции в проекты, созданные начальством компании, вам следует обратить внимание на то, что вы используете меньше vue-cli. выбрать последний элементManually select featuresВойдите, нам нужно настроить конфигурацию, не используйте конфигурацию по умолчанию.
  3. Здесь я рекомендую комбинацию опций, которые я обычно использую для контента, зависящего от проекта.Предполагается, что все понимают, для чего нужны эти опции, но я пишу относительно мало тестов, и я никогда не писал E2E, поэтому я обычно не выбираю Вы можете справиться с этим самостоятельно, если это необходимо.
  4. После выбора нажмите Enter, и вам будет предложено следующееUse class-style component syntax? (Y/n)использовать или нетclass-styleГрамматика, выбор курсаNАх, мы будем использовать состав-апи полностью, и мы не будем использовать классы, чтобы сделать это, и я лично не люблю использовать декораторы и классы. Если вам это нравится, должно быть много информации, чтобы ввести это. Я выиграл не выбирайте его здесь.
  5. Затем вас спросят, используете ли вы TSUse Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?, по умолчанию все в порядке.
  6. Затем попросите вас использовать хэш-маршрутизацию или маршрутизацию по истории,Use history mode for router?, смотрите по потребностям своего проекта.Если не хотите дополнительно настраивать nginx, то можете использовать хеш-роутинг.Здесь я буду по умолчанию.
  7. Затем он спрашивает, какой препроцессор CSS использовать,Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):, Здесь я выбираю второй node-sass, потому что я много использую sass, и у меня есть чувства.Я пробовал dart-sass, и поддержка селектора глубины не является дружественной, поэтому мне это не нужно.
  8. Теперь спрашивается выбор линтера и форматтера, здесь рекомендуется предпоследнийESLint + Prettier, конечно, если у вас есть особые потребности, просто выберите тот, который вам нравится.
  9. Затем он спросит, когда нужно отформатировать ваш код, Pick additional lint features:, Оба параметра можно выбрать с помощью фиксации при сохранении.
  10. Тестовая структура шутка, пожалуйста, выберите свои особые потребности
  11. Где размещаются babel, eslint и другие конфигурации? Where do you prefer placing config for Babel, ESLint, etc.?, разумеется, это отдельная папка, и она хранится в package.json.

Вышеупомянутые параметры являются моей обычной конфигурацией, вы можете выбрать в соответствии с вашими потребностями.

Установить состав API yarn add @vue/composition-api

существуетsrc/main.tsимпортировать и использовать.

...
import CompositionAPI from '@vue/composition-api';

Vue.use(CompositionAPI);
...

Установите официальный рекомендуемый инструмент jsxОфициальный рекомендует инструмент jsx, который также необходимо установитьyarn add babel-preset-vca-jsx -D

Просто установите его в зависимости от разработчиков, он не нужен для онлайн-запуска после упаковки. Конечно, можно не устанавливать его, но это просто включает передачу компонента в качестве реквизита другому компоненту, и я не знаю, что вам следует делать. Это очень важно для последующей инкапсуляции очень удобного универсального табличного компонента.

плагин vuex AmwayВ процессе использования композиции-апи я обнаружилvuex-composition-helpersАртефакт, напрямую используя функцию useXXXX, может отображать состояние, действия, мутации и геттеры vuex в реагирующие объекты, которые используются для замены обычно используемыхmapState,mapActions,mapMutations,mapGetters, разумеется, разбитый в vuexmodulesПодмагазины также имеют соответствующиеuseNamespacedXXXзаменить. Когда я только начинал, я тупо написал это самuseStats, useActions, useStore,а потом когда ехал на метро домой,я вдруг увидел этот инструмент.Я был в восторге.Заинтересованные друзья тоже могут зайти в исходники.Реализация очень простая и понятная.

Тогда, конечно, нужно установитьyarn add vuex-composition-helpers

babel.config.js слегка изменен

module.exports = {
  presets: ["vca-jsx", "@vue/cli-plugin-babel/preset"]
};

Установить ElementUIЭто не так много, официальный сайт открывается, устанавливается и настраивается в соответствии с руководством. Установить:yarn add element-uiТема рекомендует создать файл scss: assets/style/_element-variables.scss, который может легко переопределить некоторые цвета темы или что-то в этом роде. Затем создайте index.scss, чтобы импортировать этот файл, и, наконец, импортируйте файл scss в main.ts, чтобы получить настраиваемую тему.

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

// main.ts
...
import ElementUI from 'element-ui';
import './assets/styles/index.scss'; // index.scss里包含element主题，也可以放一些reset的样式，公共样式或者其他

Vue.use(ElementUI, {
  size: 'small'
});
...

Основные инструменты установлены, и вы можете с удовольствием писать код.

defineComponentПервый опыт

Сначала перепишите компонент HelloWorld

<template>
  <div class="hello">
    Hello world
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance } from "@vue/composition-api";

export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: String
  },
  setup(props, ctx) {
    console.log(getCurrentInstance());
    console.log(ctx);
  }
});
</script>

пройти черезdefineComponentДля определения компонента функция setup имеет два общих параметра, первый — props, второй — setupContext, эти два значения такие же, как vue3, можно передатьgetCurrentInstanceПолучите текущий экземпляр компонента, возвращаемое значение этой функции является текущим экземпляром компонента, распечатайте его, а затем vue2thisКонтент тот же, параметры, которые должны были быть раньше, остались, ноsetupНет вthis, только ctx, чего достаточно. Если вам интересно, вы можете посмотреть, что выводит консоль.

Опыт TSX

src/compnents/TestComp.tsxСоздавайте компоненты TestComp в режиме tsx, обратите внимание на атрибутыcompПолучим компонент, мы можем указать тип в пропсах как Object, но этого недостаточно, нам нужно определить детальный тип компа, тогда мы можем повторно указать тип пропсов в настройке.

import { defineComponent } from "@vue/composition-api";
import { VueConstructor } from "vue/types/umd";

type TestCompProps = {
  comp: VueConstructor<Vue>
}
export default defineComponent({
  name: "TestComp",
  props: {
    comp: {
      type: Object
    }
  },
  setup(props: TestCompProps) {
    const { comp: Comp } = props;
    return () => <Comp />;
  }
});

Или прямо указано в общем параметре defineComponent

import { defineComponent } from "@vue/composition-api";
import { VueConstructor } from "vue/types/umd";

type TestCompProps = {
  comp: VueConstructor<Vue>
}
export default defineComponent<TestCompProps>({
  name: "TestComp",
  props: {
    comp: {
      type: Object
    }
  },
  setup(props) {
    const { comp: Comp } = props;
    return () => <Comp />;
  }
});

Для большего игрового процесса, пожалуйста, нажмите команду + щелчок или Ctrl + щелчок мыши, чтобы войтиdefineComponentФайл декларации для изучения.

Обратите внимание, что каждый раз, когда мы определяем компонент, мы наводим указатель мыши, чтобы увидеть, к какому типу он относится.VueConstructor<Vue>Введите, чтобы использование tsx не сообщало об ошибке при возврате.

Передавать компоненты через свойства src/compnents/AA.vueСоздайте компонент AA.vue и напишите обычный компонент vue.

<template>
  <div class="hello">
    AA Component
  </div>
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";

const HelloWorld = defineComponent({
  name: "AA"
});
export default HelloWorld;
</script>

Внедрите компонент AA и компонент TestComp в HelloWorld, а затем передайте AA в TestComp.

<template>
  <div class="hello">
    Hello world
    <test-comp :comp="AA"></test-comp>
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance } from "@vue/composition-api";
import TestComp from "./TestComp";
import AA from "./AA.vue";

export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: String
  },
  components: {
    TestComp,
    AA
  },
  setup(props, ctx) {
    console.log(getCurrentInstance());
    console.log(ctx);
    return {
      AA
    };
  }
});
</script>

На этом этапе вы можете видеть, что браузер может выводить слова AA Component, указывающие на успех.

Другой способ записи tsxвоссоздатьMM.tsx

const MM = () => {
  return () => <div>this is MM</div>
}

MM.name = 'MM';

export default MM;

Затем внедрить его в компонент HelloWord, вернуть тот же метод (прямо под AA), а затем заменить атрибут, переданный в компонент TestComp, с AA на MM. Сохранить, все еще ок. Просто в этот раз код не сообщит об ошибке, аVeturПлагин выдаст нам красную волнистую линию. Поэтому я по-прежнему рекомендую использовать этот метод в TestComp для определения компонентов TSX.

Фактически, это то, что говорится в официальной документации, когда программа установки возвращает функцию, эта функция будет использоваться как функция рендеринга, поэтому она является функциональным компонентом в vue2.

Используйте функциональные компоненты, чтобы дважды инкапсулировать супер удобный и простой в использовании компонент формы

Важно: Контейнер, отображающий компонент пользовательской ячейки таблицы TableCellRender.tsx.

Таблица будет передана в компонент компа как пользовательская ячейка.Вы можете не знать заранее, что здесь отображать, и данные области также будут переданы.

import { defineComponent } from "@vue/composition-api";
import { VueConstructor } from 'vue/types/umd';

type TableCellRenderProps = {
  scope: any;
  comp: VueConstructor<Vue>
}

export default defineComponent<TableCellRenderProps>({
  name: 'TableCellRender',
  props: {
    scope: {
      type: Object,
      required: true
    },
    comp: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const { comp: Comp } = props;
    console.log('props.scope', )
    return () => <Comp row={props.scope.row} />
  }
})

Компонент TableBase.vueОбщий компонент, определяет четыре типа ячеек, один тип ссылки, один поле множественного выбора, один динамический компонент, передаваемый пользователем, и последний компонент по умолчанию, а также перелистывание страниц, конечно, перелистывание Пейджер может быть скрытый.

<template>
  <div class="table-base">
    <div class="table-container">
      <el-table
        :size="size"
        v-loading="loading"
        :data="data"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-if="multiple"
          type="selection"
          width="55"
          :selectable="checkSelectable"
        ></el-table-column>
        <template v-for="(column, index) in tableColumns">
          <el-table-column
            v-if="column.comp"
            :key="index"
            :prop="column.key"
            :label="column.label"
            :width="column.width ? column.width : ''"
            :show-overflow-tooltip="!column.multipleline"
          >
            <template slot-scope="scope">
              <table-cell-render
                :scope="scope"
                :comp="column.comp"
              ></table-cell-render>
            </template>
          </el-table-column>
          <el-table-column
            :key="index"
            v-else-if="column.active"
            :prop="column.key"
            :label="column.label"
            :width="column.width ? column.width : ''"
            :show-overflow-tooltip="!column.multipleline"
          >
            <template slot-scope="scope">
              <span
                class="active-link"
                @click="() => handleClickActiveLink(scope.row)"
                >{{ scope.row[column.key] }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :key="index"
            :prop="column.key"
            :label="column.label"
            :width="column.width ? column.width : ''"
            :show-overflow-tooltip="!column.multipleline"
          ></el-table-column>
        </template>
      </el-table>
    </div>
    <div class="table-pagination" v-if="!noPagination">
      <el-pagination
        class="pagination"
        background
        :layout="layout"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";
import TableCellRender from "./TableCellRender";
export default defineComponent({
  name: "MTableBase",
  components: {
    TableCellRender
  },
  props: {
    layout: {
      type: String,
      default: "total, prev, pager, next, jumper"
    },
    size: {
      type: String,
      default: "small"
    },
    loading: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: true
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default: () => []
    },
    currentPage: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 0
    },
    noPagination: {
      type: Boolean,
      default: false
    }
  },
  setup(props, ctx) {
    const { emit } = ctx;
    const handleSelectionChange = (val: any) => emit('selection-change', val);
    const handleSizeChange = (val: number) => emit('current-change', val);
    const handleCurrentChange = (val: number) => emit('current-change', val);
    const handleClickActiveLink = ($event: MouseEvent, row: any) => emit('get-row-info', $event, row);
    const checkSelectable = (row: any) => row.name !== 'None';

    return {
      handleSelectionChange,
      handleSizeChange,
      handleCurrentChange,
      handleClickActiveLink,
      checkSelectable
    }
  }
});
</script>

<style lang="scss" scoped>
.table-pagination {
  padding-top: 20px;
  .pagination {
    text-align: center;
  }
}
.table-container /deep/ {
  .el-table {
    font-size: 14px;
  }
}
</style>

Использование компонентов формы

Превратите домашнюю страницу в ts и используйтеdefineComponentОпределите компоненты. В дальнейшем табличный компонент больше не нужно будет перемещать, достаточно каждый раз для рендеринга определять свой компонент рендеринга для определенного столбца.

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <table-base :tableColumns="column" :data="data"></table-base>
  </div>
</template>

<script lang="tsx">
import { defineComponent } from "@vue/composition-api";
import HelloWorld from "@/components/HelloWorld.vue";
import TableBase from "@/components/TableBase.vue";

const helloCell = defineComponent({
  name: "HelloCell",
  props: {
    row: {
      type: Object
    }
  },
  setup(props: { row: { hello: string } }) {
    console.log("cell inner", props);
    const hello = props.row.hello;

    return () => <el-button type="primary" size="mini">{hello}</el-button>;
  }
});

export default defineComponent({
  name: "Home",
  components: {
    HelloWorld,
    TableBase
  },
  setup() {
    const column = [
      { label: "Hello", key: "hello", comp: helloCell },
      { label: "World", key: "world" }
    ];
    const data = [
      { hello: "hi", world: "wd" },
      { hello: "hello", world: "world" }
    ]

    return {
      column,
      data
    }
  }
});
</script>

Эффект:=====================Разделительная линия====================== Я еще не закончил, а о простом использовании vuex-composition-helpers хочу написать позже, но сейчас 3 часа ночи. Иди завтра на работу, приходи сюда первым, продолжи завтра =====================Разделительная линия====================== (я снова вернулся, разделительную черту пока удалять не буду, можете делать вид, что усердно работаете)

вопрос: Пока вроде нормально, но зоркие друзья обязательно найдут какие-нибудь хитрости.TableCellRenderСвойство Comp, определенное в, указывает тип какVueConstructor<Vue>, на данный момент он не определяет props, поэтому под строкой будет красная волнистая линия.Непонятно как здесь это сделать, но на компиляцию и работу проекта это не повлияет. Если вы что-то поняли, пожалуйста, оставьте комментарий ниже.

Хуки помогают разделить общую логику и сложную логику.

Vue3/composition-api охватывает функциональное программирование.Нам также необходимо трансформировать метод разработки при использовании новых технологий.Если vue3 по-прежнему пишется и используется точно так же, как vue2, то лучше продолжать использовать 2.

Сценарии использования хуков

1. Разделить общую логику

Давайте использовать реальную сцену.Сегодня в нашей системе есть небольшая проблема.Каждая форма формы во всплывающем диалоговом окне должна быть нажата и автоматически сфокусирована на первом входе.Однако, хотя Element предоставляетautofocusсвойство, но оно не фокусируется автоматически. Это требует ручного обслуживанияref, после монтажа, черезnextTickвручную вызвать компонент вfocus()метод, но есть много компонентов, которые нужно изменить, и слишком трудоемко добавлять один за другим. Так что используйте толькоmixin, а затем добавьте в первый ввод каждого диалогового окнаrefдляautofocusхарактеристики.

export default {
  name: 'AutoFocusMixin',
  mounted() {
    this.$nextTick(() => {
      this.$refs.autofocus.focus();
    });
  }
};

Преимущества этого очевидны. Логика кода является общей, но она может быть очень запутанной для будущих поколений. Когда вы видите ref="autofocus", вы не можете найти, где ее использовать при поиске непосредственно в Если вы не заметите примеси, то удаление этого атрибута также может подумать, что код оптимизирован, что приведет к тому, что проблема в итоге будет воспроизводиться.

Но когда в vue есть хуки, все по-другому, мы можем извлечь эту логику

// useAutofocus.ts
import { ref, Ref, onMounted } from '@vue/composition-api';
import { Input } from 'element-ui';

export function useAutofocus() {
  const focusEl:Ref<null | HTMLInputElement | Input> = ref(null);

  onMounted(() => {
    setTimeout(() => {
      if (focusEl.value) {
        focusEl.value.focus();
      }
    }, 0)
  })

  return focusEl;
}

Введите компонент, который необходимо использовать

about.vue

<template>
  <div class="about">
    <el-input ref="focusEl" placeholder="请输入内容" v-model="inputValue"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "@vue/composition-api";
import { useAutofocus } from "@/hooks/useAutofocus";
export default defineComponent({
  name: "About",
  setup() {
    const inputValue = ref("");
    const focusEl = useAutofocus();

    return {
      inputValue,
      focusEl
    };
  }
});
</script>

автофокус работает, отлично. Таким образом, преимущества над миксинами очевидны: по крайней мере, мы можем узнать, где определены переменные и как их использовать, избегая двусмысленности и сложности в обслуживании.

Другой момент, что миксины иногда пишут много логики, но зато можно разбить хуки на детали, и можно ввести кого нужно в итоге.

2. Разделить сложную логику

Если ваш проект очень сложный, вы можете написать тысячи строк кода на одной странице, тогда функция безопасности может разбить каждый ваш функциональный код на хуки, а зависимые данные передаются через параметры.Конечно, хуки также могут возвращать A различные типы данных, такие как функции, могут использовать хук для написания бизнес-логики вашего клика или других операций и, наконец, возвращать функцию, которая вызывается при клике.

Некоторые друзья-экстремалы могут даже разделить всю бизнес-логику на хуки, оставив только кучу информации о создании переменных, экспорте переменных и обращении к переменным в компоненте.

После разделения логики можно использовать эти хуки в других местах, даже если они не используются, это сделает обслуживание более удобным. Ведь некоторые функции будут написаны наmountedЯ буду там снова через некоторое времяupdatedВ написании везде разбросана логическая каша, да и стоимость обслуживания тоже достаточно велика.

Использование vue-composition-helpers

Этот инструмент используется вместоmapState,mapActionsАльтернативы другим функциям. Подобные хуки, по-видимому, предусмотрены в vue3.

Возьмем в качестве примера смоделированную функцию входа пользователя.Создайтеsrc/store/modules/user.tsдокумент


import { Module } from 'vuex';
// 模拟的登录api
const fakeLogin = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({name: '张三' })
    },300)
  })
}

// 声明state
interface State {
  loginPending: boolean;
  userInfo: {name: string} | null
}

// 创建子store
const UserModel: Module<State, {}> = {
  namespaced: true,
  state: {
    loginPending: false,
    userInfo: null
  },
  mutations: {
    setLoginPending: (state, loginPending: boolean) => {
      state.loginPending = loginPending;
    },
    setUserInfo: (state, userInfo: {name: string} | null) => {
      state.userInfo = userInfo;
    }
  },
  actions: {
    loginAction: async ({ commit, state }): Promise<any> => {
      if (state.loginPending) {
        return;
      }
      try {
        commit('setLoginPending', true);
        const res = await fakeLogin();
        commit('setUserInfo', res);
        commit('setLoginPending', false);
      } catch (exp) {
        commit('setLoginPending', false);
        console.error('error: ', exp);
        throw exp;
      }
    },
    logoutAction: () => {
      console.log('this is logout');
    }
  }
};

export default UserModel;

существуетsrc/store/index.tsвведен в

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    user
  }
});

export default store;

Выше приведено основное использование vuex. Мы можем создатьuseUserStorehook, что делает наш код более общим. В следующем примере используетсяuseNamespacedState, useNamespacedActionsДва API, остальные для проверки документации, а использование следующееuseState,useActionsПодождите точно так же.

import { useNamespacedState, useNamespacedActions } from "vuex-composition-helpers";
import { Ref } from '@vue/composition-api';

export function useUserStore() {
  const {
    loginPending,
    userInfo
  } : {
    loginPending: Ref<boolean>;
    userInfo: Ref<{name: string} | null>;
  } = useNamespacedState("user", ["loginPending", "userInfo"]);

  const { loginAction } = useNamespacedActions("user", ["loginAction"])

  return {
    state: {
      loginPending,
      userInfo
    },
    actions: {
      loginAction
    }
  }
}

Почему бы не использовать логику вышеприведенной функции непосредственно в конкретном компоненте? Если он используется таким образом, одна и та же операция должна повторяться каждый раз, когда используется контент в хранилище, поэтому, если есть логика повторения, мы используем хуки.

Используйте хук useUserStore, который мы создали в компоненте about

<template>
  <div class="about" v-loading="loginPending">
    <el-input ref="focusEl" placeholder="请输入内容" v-model="inputValue" />
    <el-button @click="loginAction">登录</el-button>
    <div>{{ JSON.stringify(userInfo) }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "@vue/composition-api";
import { useAutofocus } from "@/hooks/useAutofocus";
import { useUserStore } from "@/hooks/useUserStore";
export default defineComponent({
  name: "About",
  setup() {
    const inputValue = ref("");
    const focusEl = useAutofocus();
    const {
      state: { loginPending, userInfo },
      actions: { loginAction }
    } = useUserStore();

    return {
      inputValue,
      focusEl,
      loginPending,
      userInfo,
      loginAction
    };
  } 
});
</script>

Эффект:

После инкапсуляции в виде ловушек, если вы хотите использовать ее в других местах, очень удобно вызывать функцию ловушки напрямую.

О реактивном API

На самом деле, я недавно видел, как многие студенты делятся своими собственными статьями о ранних последователях, связанных с vue3, и все они в основном представляют адаптивные API, но я приведу только их здесь.

Адаптивные API, функции подключения и т. д. можно найти в официальной документации веб-сайта, которая является всеобъемлющей и подробной. Вот краткое введение в использование:

  1. const a = ref(true)Использование: значение a можно использовать непосредственно в шаблоне, а a.value = newvalue необходимо использовать для обновления a в коде. ref обычно используется для значений обычных типов или массивов. На самом деле, если значение в ref является массивом или объектом, оно в конечном итоге будет преобразовано в реактивное в реализации.
  2. const aa = reactive({name: 'haha'}), реактивный можно использовать только для массивов или объектов, независимо от того, обновляется он или используется, им можно напрямую манипулировать, а не так же, как ref.value;

Эти два являются наиболее часто используемыми, и если у вас есть какие-либо вопросы по поводу других, официальный сайт — лучшее место для их решения.

Суммировать

На этот раз я поделился некоторыми примерами использования vue-composition-api в сочетании с ts.Следует отметить, что для изменения мышления с конфигурации на функционал мы должны подумать о том, как предыдущий код должен быть написан в новом фреймворке. Мое исследование в основном заключается в описанном выше способе написания, может быть, вы найдете лучший способ его использовать, добро пожаловать в то время.@艾特一下我, позвольте мне следовать вместе. Кроме того, я рекомендую анализ исходного кода vue3, проведенный г-ном Хуангом Ихуангом из Lagou Education, Здесь нет ссылки или промо-кода, и я рекомендую его наизусть. Вы можете получить больше.

Категории