[Примечания к интерфейсу] Быстрое использование Vuex

Vue.js

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

Начните использовать Vuex, перенесите состояние во внешнее управление приложением, Vuex называет это управлением состоянием.Store, полностью независимое приложение, он отвечает только за управление состоянием. Попробуйте отделить приложения Vuex от приложений Vue,

  • Приложение Vuex, выполнение государственного управления, можно понимать как модельный слой
  • Приложение Vue, отвечающее только за отображение данных, чистый слой просмотра

Vuex-приложение

Так называемое государственное управление есть не что иное, какопределить состояние, изменить состояние.

определить состояние

Чтобы определить состояние в Vuex, нам нужно создать новый Store.Ядром каждого приложения Vuex является хранилище (склад).

// store.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  }
});

export default store;

Приведенный выше код создает хранилище,store.stateсостояние определено. Это ничем не отличается от определения данных в Vue,

Измените статус ниже.

Изменить напрямую

Если вы хотите быстро использовать Vuex, вы можете напрямую изменить состояние в хранилище в компоненте (прямое изменение означает изменение с помощью точечных операций).

state.count = 2;

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

строгий режим

Включите строгий режим, просто передайте его при создании магазинаstrict: true:

const store = new Vuex.Store({
  strict: true
});

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

mutation

Единственный способ изменить состояние в хранилище Vuex — отправить мутацию.

существуетVuex.StoreСреди опций конструктора есть опция мутации, которая похожа на регистрацию события: ключ — это строка, представляющая тип мутации, значение — функция обратного вызова (обработчик),

В этой функции обратного вызова мы фактически меняем состояние.У нее два входных параметра.Первый параметр — это состояние, то есть состояние в хранилище, а второй параметр — Payload, который является дополнительным параметром, передаваемым при отправке мутации.

определить мутацию

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment(state) {
      state.count++; // 变更状态
    }
  }
});

совершить мутацию

Мутация определена выше.Чтобы разбудить обработчик мутации, единственный интерфейсstore.commitЕсли вы знакомы с монитором событий, фиксация аналогична Vue.$emit, jquerytrigger.

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

параметр фиксации является объектом

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

// 对象风格的提交方式
store.commit({
  type: "increment",
  amount: 10
});

введите в качестве первого параметра

Также неплохо разделить тип и полезную нагрузку.Вы можете выбрать только тип в качестве первого параметра дляcommit(type,[payload])представлен в виде , официально именуемый этимОтправлено как полезная нагрузка.

store.commit("increment");
store.commit("increment", 10);
store.commit("increment", { count: 2 });

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

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

  • В компоненте приложения Vue вызовите его в компонентеstore.commit.
  • И в акции магазина.

Action

Управление состоянием — это не что иное, как определение состояния и изменение состояния.Мутация уже может изменять состояние, так зачем вам действия?

синхронный и асинхронный

В Vuex все мутации — это синхронные транзакции, и смешивание асинхронных вызовов в мутациях может затруднить отладку вашей программы.

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

Действие действительно очень похоже на мутацию, разница в следующем:

  • Действия вызывают мутации, а не изменения состояния напрямую.
  • Действие может содержать произвольные асинхронные операции.

Зарегистрировать действие:

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

Входным параметром функции Action является экземпляр с теми же методами и свойствами, что и экземпляр хранилища.contextобъект. Так что вы можете

  • context.commitсовершить мутацию,
  • context.stateПолучить состояние.
  • context.gettersПолучить геттеры.
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit("increment");
    }
  }
});

Распределить действие

Пропуск действияstore.dispatchТриггер метода:

// 以载荷形式分发
store.dispatch("incrementAsync", {
  amount: 10
});

// 以对象形式分发
store.dispatch({
  type: "incrementAsync",
  amount: 10
});

Объединение действий

store.dispatchможет обрабатывать обещание, возвращенное обработчиком запущенного действия, иstore.dispatchпо-прежнему возвращает обещание, так что проходитеasync / await, очень удобно контролировать процесс

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

обработка формы

Проблема с формой заключается в использованииv-modelкогда,v-modelБудет пытаться изменить состояние напрямую, а Vuex не разрешает прямое изменение состояния в строгом режиме.

Это легко решить, если мы делаем поведение изменения состояния в соответствии с требованиями Vuex с помощьюcommit mutationметод можно модифицировать.

Есть два способа.

Решите с помощью «Vuex Thinking»

покидатьv-modelинструкции, реализуйте самиv-modelДвусторонняя привязка, очень простая,

  • inputпомеченvalueПривязки свойств соответствуют вычисляемым свойствам, отображаемым из хранилища,
  • Прослушайте входное событие и используйте метод изменения фиксации, чтобы изменить состояние в хранилище.
<input :value="message" @input="updateMessage" />

computed: {
  ...mapState({
    message: state => state.obj.message
  })
},

methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

Функция мутации в магазине:

mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

Решено с помощью вычисляемых свойств Vue

Если вы настаиваете на использованииv-model, что можно сделать в Vuev-modelСвязанное вычисляемое свойство задает поведение множества.

<input v-model="message" />

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

Это все, что касается управления состоянием с помощью Vuex.

С точки зрения потоковой архитектуры, три ядра,State,Mutation,Action, достаточно, подвести итог на самом деле очень просто,Синхронная мутация фиксации, асинхронное действие отправки.

Основные принципы

  • Состояние уровня приложения должно быть централизовано в одном объекте хранилища.
  • Выполнение мутаций — единственный способ изменить состояние, и этот процесс является синхронным.
  • Асинхронная логика должна быть инкапсулирована в действии.

Помня об этих принципах, начните интегрировать Vuex в свой проект Vue, а что касается других концепций, то это вишенка на торте.

Приложение Vue с использованием Vuex

Все общие API Vuex задействованы выше, и идея их использования

  • Определить статус: Пройденоnew Vuex.Store({})Создайте экземпляр хранилища, определите состояние, геттеры, действия, мутации.
  • Изменить состояние: использоватьstore.commitпредставитьmutation,использоватьstore.dispatchраспределениеactions.

Теперь, когда вся часть управления состоянием управляется экземпляром хранилища, то, как использовать хранилище в компонентах Vue, очень просто и совсем не волшебно.

существуетstore.jsВ файле мы создали экземпляр магазина и экспортировали его.Согласно знанию модуляризации js, мы можем использовать его напрямую, пока мы импортируем его там, где это необходимо.

Компоненты импортируются в магазин

Его можно импортировать непосредственно в необходимые компоненты, как импорт обычного файла js.

import store from "path/to/store.js";

Магазин вводится в компонент, и вы можете напрямую передатьstore.stateНа самом деле так просто обратиться к состоянию и использовать краткий API непосредственно из экземпляра хранилища.

store.state.count = 2; // 直接修改，并不建议
store.commit(); // 在 store 中调用 mutation
store.dispatch("increment"); // 在 store 中分发 action

Нам часто нужно использовать компоненты Vue вtemplateПокажите состояние в Vuex, поскольку хранилище состояний Vuex является реактивным, самый простой способ прочитать состояние из экземпляра хранилища — этовычисляемое свойствовозвращает состояние в:

import store from "path/to/store.js";
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count() {
      return store.state.count;
    }
  }
};

в любое времяstore.state.countКогда он изменяется, вычисляемые свойства переоцениваются, и соответствующий DOM обновляется.

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

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

Импорт магазина по всему миру

Vuex предоставляет механизм для «внедрения» состояния из корневого компонента в каждый дочерний компонент с помощью параметра хранилища:

// app.js
import Vue from "vue";

import store from "path/to/store.js";

const app = new Vue({
  store // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
});

вкорневой экземплярЗарегистрируйте параметр хранилища в , экземпляр хранилища будет внедрен во все подкомпоненты в корневом компоненте, и подкомпоненты могут пройтиthis.$storeдоступ к. Таким образом, нам не нужно вводить каждый компонент отдельно.

this.$store.state.count = 2; // 直接修改，并不建议
this.$store.commit("", {}); // 直接在组件中提交 mutation
this.$store.dispatch("increment"); // 在组件中分发 action

Вспомогательные функции привязки компонентов

  • mapState
  • mapGetters
  • mapMutations
  • mapActions

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

больше концепций

Getter

Если вам нравятся вычисляемые свойства, предоставляемые Vue, Vuex позволяет вам определять «геттеры» в хранилище (думайте о них как о вычисляемых свойствах хранилища).

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

Module

Модульность не является концепцией управления состоянием, и в ней нет необходимости, но если приложение очень сложное, разделение хранилища на модули будет обязательным.Vuex предоставляет вариант модульности, и вам необходимо просмотреть документацию.

Исходная ссылка: Добро пожаловать на github, чтобы пометитьGitHub.com/liangzi92/…

Категории