Обновить
Описанный ниже шаблон вспомогательной функции vuex теперь доступен как модуль npm, vuex-intern.
вступление
Vue.js - это мой интерфейсный фреймворк в наши дни. Я не люблю компонентную модель намного больше, чем модель компонентов React, но легкость, с которой Vuex, центральное управление состоянием Vue, интегрируется с компонентами Vue, обеспечивает очень хорошее взаимодействие с разработчиками. Этот пост о том, как я делал мутации в Vuex.
Этот пост будет иметь больше смысла для тех, кто знаком с Vuex, но для тех, кто не знаком, мутация в Vuex - это функция, которая изменяет состояние. Функция мутации получает состояние и значение, которое нужно перевести в состояние. В общем, это простые функции для написания. Я начал замечать, что многие из них в конечном итоге выглядели одинаково, например, установка значения или добавление элемента в список, поэтому я написал несколько функций изменения состояния, которые могут быть настроены (каррированы) с информацией, которая различает эти аналогичные функции.
Пример
Самый простой из них называется «набор». Он просто устанавливает свойство корневого уровня состояния.
Первый пример - это то, как это выглядело бы без мутатора состояния.
const state = {
prop1: null,
prop2: null
}
const mutations = {
setProp1 (state, val) {
state.prop1 = val
},
setProp2 (state, val) {
state.prop2 = val
}
}
Давайте проведем рефакторинг, чтобы использовать мутатор состояния.
const set = key => (state, val) => {
state[key] = val
}
const mutations = {
setProp1: set('prop1'),
setProp2: set('prop2')
}
Мы сократили часть утомительного шаблонного кода и одновременно избавились от необходимости тестировать наши функции мутации (при условии, что используемые мутаторы состояния уже протестированы).
Пример модуля Vuex с использованием мутаторов состояния
Вот пример, который включает мутаторы, которые я часто использую. Реализации приведены под примерами.
const state = {
primitive: null,
bool: false,
list: [],
users: []
}
const getters = {
// get the user by their id
userById: findByKey('users', '_id')
}
const mutations = {
setPrimative: set('primative'),
toggleBool: toggle('bool'),
pushToList: pushTo('list'),
replaceUser: replaceRecordInList('users', '_id')
}
const actions = {
...
fetchUser ({ commit }, userId) {
fetch(`https://example.com/users/${userId}`)
.then(res => res.json())
.then(user => commit('replaceUser', user))
}
}
Реализации
Эти vuex вспомогательные функции собраны в модуле npm под названием vuex-intern. Пожалуйста, перейдите сюда, чтобы увидеть полный список и реализацию вспомогательных функций, и импортируйте модуль, чтобы использовать их.
