предисловие
Как важная часть экосистемы Vue, vuex — это острый меч для управления магазином. Короче говоря, vuex — это менеджер состояний для vue. Использование vuex может сделать поток данных ясным, отслеживаемым и предсказуемым, а также может легко реализовать расширенные функции, такие как перемещение во времени.Для сложных крупномасштабных приложений vuex станет особенно важным.Для сегментации хранилища, хранилища. Модульность хранилища, смена магазина, отслеживание магазина и т. д., управление магазином и использование vuex для управления магазином значительно улучшит стабильность и масштабируемость проекта! В этой статье будет проанализирован принцип проектирования и реализации vuex через исходный код vuex!
Примечание: В этой статье показан только основной код ядра.Во-первых, из-за недостатка места, а во-вторых, код ядра легче понять! Кроме того, эта статья относится к продвинутой статье vuex, и я не буду вдаваться в подробности о связанных с vue механизмах, задействованных в этой статье, и о продвинутом использовании vuex! Пожалуйста, перейдите на официальный сайт, чтобы проверить это!
Подготовить
Анализ состава vuex
Представлено vuexState,GetterОпределено понятие государства; использованиеMutationа такжеActionвносить изменения в состояние; вводитьModuleМодульная сегментация состояния, внедрение плагинов для моментального снимка, записи и отслеживания состояния, обеспечениеmapState、mapGetters、 mapActions、 mapMutationsВспомогательные функции удобны разработчикам для обработки хранилища в файле vm. Конкретные соотношения композиции следующие:
Анализ использования vuex
Использование vuex очень простое, пожалуйста, обратитесь к конкретным подробностям использования.официальный сайт векс, эта статья является лишь кратким введением для удобства анализа исходного кода! Нам просто нужно использовать механизм использования vue для внедрения созданного объекта хранилища в экземпляр vue! Как показано ниже:
Основной код выглядит следующим образом:
Vue.use(Vuex); // 1. vue的插件机制，安装vuex
let store = new Vuex.Store({ // 2.实例化store，调用install方法
state,
getters,
modules,
mutations,
actions,
plugins
});
new Vue({ // 3.注入store, 挂载vue实例
store,
render: h=>h(app)
}).$mount('#app');
Вопросы о вексе
Используя vuex для управления магазином, мы не можем не спросить:
- Как хранилище vuex внедряется в компонент?
- Как состояние и геттер vuex сопоставляются с автоматическим обновлением каждого экземпляра компонента?
Эта глава направлена на решение вышеуказанных вопросов.Давайте углубимся в принцип vuex и раскроем тайну vuex!
Изучение принципа
Эта часть ответит на вышеуказанные вопросы, проанализирует основной код с помощью анализа исходного кода и ответит на вопросы.
Вопрос: Как хранилище vuex внедряется в компонент?
Чтобы ответить на этот вопрос, давайте начнем с внешнего вида vuex.Из приведенного выше введения мы знаем, что нам нужно установить vuex перед использованием vuex! Основной код выглядит следующим образом:
Vue.use(Vuex); // vue的插件机制,安装vuex插件
Анализ исходного кода
Вышеприведенный код выигрывает от vueМеханизм плагина, который будет загружать vuex при вызове метода установки vuex!Поэтому мы непосредственно сосредоточимся на реализации метода установки.Код ядра выглядит следующим образом:
Vue.mixin({ beforeCreate: vuexInit });
Видно, что хранилище внедряет компоненты экземпляра Vue через Vue.механизм миксина, с помощью компонентов vueЖизненный циклкрюкbeforeCreateЗавершенный. То есть во время создания каждого компонента vue будетbeforeCreateзвонить перед хукомvuexInitметод. Ниже мы сосредоточимся на функции vuexInit. Ниже приведен основной код vuexInit!
this.$store = typeof options.store === 'function'
? options.store()
: options.store
Основная проблема этого кода заключается в указании this.Благодаря механизму примесей this будет указывать на экземпляр компонента vue! Наконец, мы можем получить ссылку на объект хранилища vuex $store в экземпляре компонента vue! Схема выглядит следующим образом:
В заключение
Vuex использует механизм примесей Vue, смешивает хук beforeCreate для внедрения хранилища в экземпляр компонента vue и регистрирует ссылочное свойство $store хранилища vuex!
Для получения ответов на оставшиеся вопросы см.Углубленный принцип vuex (ниже)