Встречайте интервью Принципиальный анализ Vuex
Введение
Поскольку я изучил структуру VUE, основной подключаемый модуль vuex незаменим, и он в основном используется при выполнении проектов. Возможно, вы будете использовать управление состоянием vuex, но есть более или менее принципы vuex. Если вы запутались или озадачены, в этой статье мы изучим принцип vuex, надеясь помочь всем.Если есть какая-то неточность, пожалуйста, дайте мне еще совет. . .
2. Что такое Vuex?
Vuex — это специальный сервис для Vue. Он используется для управления состоянием данных на странице и обеспечения экосистемы унифицированных операций с данными. Он эквивалентен базе данных mongoDB, MySQL и т. д. Любой компонент может получить доступ к данным в хранилище. Среди них есть еще Redux похожий на vuex.Redux в основном используется в React, и в будущем он будет дополнен для Redux.Теперь давайте хорошо разберемся, что такое Vuex?
Концептуальное понимание (обязательно к прочтению)
Vuex использует уровень модели в шаблоне MVC, который предусматривает, что все данные должны быть изменены в процессе действия ---> мутация ---> состояние. В сочетании с двусторонней привязкой представления данных Vue для обновления страницы. Унифицированное управление статусом страницы может сделать сложное взаимодействие компонентов простым и понятным, и вы также можете просматривать статус с помощью DEVtools во время отладки.
В текущем модульном проекте front-end spa неизбежно необходимо ссылаться на некоторые переменные в глобальной области.В настоящее время передача значений между родительским и дочерним компонентами, передача значений между дочерними и родительскими компонентами и передача между родственными компонентами — это то, что нам нужно решить. Хотя Vue предоставляет реквизиты (от отца к ребенку), фиксацию (от ребенка к отцу), локальное хранилище и хранилище сессий также могут использоваться между братьями. Но этот метод приносит больше проблем при разработке проекта, чем решает (сложный в управлении, сложный в обслуживании, сложный код, низкая безопасность). Рождение vuex также должно решить эти проблемы, тем самым значительно повысив эффективность разработки нашего проекта vue.
бросать вопросы
使用Vuex只需执行 Vue.use(Vuex)，并在Vue的配置中传入一个store对象的示例，store是如何实现注入的？
state内部是如何实现支持模块配置和模块嵌套的？
在执行dispatch触发action（commit同理）的时候，只需传入（type, payload），action执行函数中第一个参数store从哪里获取的？
如何区分state是外部直接修改，还是通过mutation方法修改的？
3. Связь между vue и vuex
Взгляните на этот пример отзывчивости Vue, данных, методов и вычислений во Vue, которые могут обеспечить отзывчивость.
Представление запускает метод приращения в методах через событие щелчка и может изменить значение count в состоянии.Как только значение count изменится, функция в вычислении может обновить getCount до представления.
<div id="app">
<button @click="increment"></button>
{{getcount}}
</app>
new Vue({
el: "#app",
// state
data () {
return {
count: 0
}
},
// view
computed: {
getCount(){
return this.count
}
},
// actions
methods: {
increment () {
this.count++
}
},
})
Итак, какое отношение vuex имеет к реактивному примеру vue?
我们可以用vuex实现和vue同样的响应式功能。
По сути, их принципы одинаковы, в vuex также есть четыре значения атрибутов: состояние, геттеры, мутации и действия. .
Без действий:
- Данные: состояние --> данные
- Получить данные: геттеры --> вычислено
- Изменить данные: мутации --> методы
Представление может изменить данные в состоянии, запустив метод в мутациях через событие click.Как только данные состояния изменяются, геттеры отражают данные в представление.
Тогда можно понимать, что действия имеют дело с асинхронностью, но просто добавляют дополнительный слой.
Поскольку мы упомянули действия мутаций, мы должны упомянутьсовершить, отправитьЧто делают эти двое?
В примере с vue методы в method запускаются через событие click. Когда есть асинхронность, и в vuex требуется диспетчеризация для запуска методов в действиях, коммиты в действиях могут запускать методы в мутациях. Для синхронизации метод мутаций в vuex запускается непосредственно фиксацией в компоненте.
В-четвертых, реализация vuex
Давайте посмотрим на функцию изменения состояния и обновления представления в vuex, как и во vue:
Vuex.js
const store = new Vuex.Store({
state: {
count: 0
},
//state的值只能通过mutations来修改
mutations: {
increment(state) {
state.count++
}
},
//this.$store.commit("increment")触发mutations中函数"increment"
actions: {
increment({commit}) {
commit("increment"); //this.$store.commit("increment")
}
},
//通过getter中的方法来获取state值
getters: {
getCount(state) {
return state.count
}
}
})
export default store
App.vue
<template>
<div id="app">
<button @click="increment">增加</button>
<!-- 有时候不能直接 强制使用store里面的状态 this.$store.state.count -->
{{this.$store.getters.getCount}}
</div>
</template>
<script>
export default {
methods: {
increment(){
//this.$store.dispatch("increment")触发actions函数"increment"
this.$store.dispatch("increment")
}
}
}
</script>
Пять, анализ исходного кода:
Теперь, когда мы поняли, что vuex может реализовать двустороннюю привязку данных, например функцию vue--update, давайте сосредоточимся на реализации исходного кода vuex:
5.1, метод установки компонента впрыска магазина
Ответьте на вопрос: как работает магазин Vuex в компоненте?
Сначала используйте vuex, вам нужно установить плагин:
Vue.use(Vuex); // vue的插件机制,安装vuex插件
Когда ues (Vuex), метод установки в vuex будет вызываться и устанавливаться в vuex! Основной исходный код установки выглядит следующим образом:
Vue.mixin({
beforeCreate() {
if (this.$options && this.$options.store) {
//找到根组件 main 上面挂一个$store
this.$store = this.$options.store
// console.log(this.$store);
} else {
//非根组件指向其父组件的$store
this.$store = this.$parent && this.$parent.$store
}
}
})
Можно видеть, что способ, которым хранилище внедряет компоненты экземпляра Vue, осуществляется через механизм миксина Vue и с помощью хука жизненного цикла beforeCreate компонента Vue. То есть во время создания экземпляра каждого компонента vue метод vuexInit будет вызываться перед хуком beforeCreate.
Ответьте на вопрос: как состояние и геттеры vuex сопоставляются с адаптивным состоянием обновления каждого экземпляра компонента?
5.2 новый vue реализует двустороннюю привязку данных:
this._s = new Vue({
data: {
// 只有data中的数据才是响应式
state: options.state
}
})
5.3, реализация геттеров
//实现getters原理
let getters = options.getters || {}
// console.log(getters);
// this.getters = getters; //不是直接挂载到 getters上 这样只会拿到整个 函数体
this.getters = {};
// console.log(Object.keys(getters)) // ["myAge","myName"]
Object.keys(getters).forEach((getterName) => {
// console.log(getterName) // myAge
// 将getterName 放到this.getters = {}中
// console.log(this.state);
Object.defineProperty(this.getters, getterName, {
// 当你要获取getterName（myAge）会自动调用get方法
// 箭头函数中没有this
get: () => {
return getters[getterName](this.state)
}
})
})
Из приведенного выше исходного кода мы видим, что состояние состояния Vuex является чувствительным, и данные vue реагируют, а состояние сохраняется в данных компонента экземпляра vue; геттеры Vuex используют вычисляемое свойство vue. для реализации данных в режиме реального времени монитор.
5.4. Реализация мутаций
let mutations = options.mutations || {}
// console.log(mutations);
this.mutations = {};
Object.keys(mutations).forEach(mutationName=>{
// console.log(mutationName);
this.mutations[mutationName] = (payload) =>{
this.mutations[mutationName](this.state,payload)
}
})
Для достижения синхронизации плюс: Динамические визуализации:
5.5. Реализация действий
// actions的原理
let actions = options.actions || {}
this.actions = {};
forEach(actions,(actionName,value)=>{
this.actions[actionName] = (payload)=>{
value(this,payload)
}
})
5.6 Реализация отправки фиксации
commit(type,payload){
this.mutations[type](payload)
}
// type是actions的类型
dispatch=(type,payload)=>{
this.actions[type](payload)
}
Шесть, краткое изложение принципа:
Vuex реализует совместное использование состояния между компонентами путем глобального внедрения объектов хранилища. В больших и сложных проектах (многоуровневая вложенность компонентов) необходимо реализовать компонент для изменения определенных данных, а несколько компонентов автоматически получают измененные данные для обработки бизнес-логики.В настоящее время более целесообразно использовать vuex . Если речь идет только о передаче данных между несколькими компонентами, использование vuex немного излишне, на самом деле вам нужно использовать только методы связи, обычно используемые между компонентами.
Дополнительная ссылкаисходный код vuex, который можно отладить
Ссылка на ссылку:Блог Woohoo.cn на.com/H JSON/afraid/105…
Общие интервью:blog.CSDN.net/Xu838209490…