stop using vue.set

This commit is contained in:
Henry Jameson 2021-04-25 13:24:08 +03:00
parent fca885e665
commit 905b9771ec
11 changed files with 52 additions and 64 deletions

View File

@ -1,4 +1,3 @@
import { set } from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faChevronDown faChevronDown
@ -40,8 +39,8 @@ export default {
return this.dValue.family return this.dValue.family
}, },
set (v) { set (v) {
set(this.lValue, 'family', v) this.lValue.family = v
this.$emit('input', this.lValue) this.$emit('update:modelValue', this.lValue)
} }
}, },
isCustom () { isCustom () {

View File

@ -34,7 +34,7 @@ const Gallery = {
}, },
methods: { methods: {
onNaturalSizeLoad (id, size) { onNaturalSizeLoad (id, size) {
this.$set(this.sizes, id, size) this.sizes[id] = size
}, },
rowStyle (itemsPerRow) { rowStyle (itemsPerRow) {
return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` } return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }

View File

@ -1,4 +1,3 @@
import { set, delete as del } from 'vue'
import { import {
rgb2hex, rgb2hex,
hex2rgb, hex2rgb,
@ -326,9 +325,9 @@ export default {
}, },
set (val) { set (val) {
if (val) { if (val) {
set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _))) this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
} else { } else {
del(this.shadowsLocal, this.shadowSelected) delete this.shadowsLocal[this.shadowSelected]
} }
} }
}, },
@ -340,7 +339,7 @@ export default {
return this.shadowsLocal[this.shadowSelected] return this.shadowsLocal[this.shadowSelected]
}, },
set (v) { set (v) {
set(this.shadowsLocal, this.shadowSelected, v) this.shadowsLocal[this.shadowSelected] = v
} }
}, },
themeValid () { themeValid () {
@ -562,7 +561,7 @@ export default {
.filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal')) .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
.filter(_ => !v1OnlyNames.includes(_)) .filter(_ => !v1OnlyNames.includes(_))
.forEach(key => { .forEach(key => {
set(this.$data, key, undefined) this.$data[key] = undefined
}) })
}, },
@ -570,7 +569,7 @@ export default {
Object.keys(this.$data) Object.keys(this.$data)
.filter(_ => _.endsWith('RadiusLocal')) .filter(_ => _.endsWith('RadiusLocal'))
.forEach(key => { .forEach(key => {
set(this.$data, key, undefined) this.$data[key] = undefined
}) })
}, },
@ -578,7 +577,7 @@ export default {
Object.keys(this.$data) Object.keys(this.$data)
.filter(_ => _.endsWith('OpacityLocal')) .filter(_ => _.endsWith('OpacityLocal'))
.forEach(key => { .forEach(key => {
set(this.$data, key, undefined) this.$data[key] = undefined
}) })
}, },

View File

@ -1,4 +1,4 @@
import Vue from 'vue' import { reactive } from 'vue'
import { find, omitBy, orderBy, sumBy } from 'lodash' import { find, omitBy, orderBy, sumBy } from 'lodash'
import chatService from '../services/chat_service/chat_service.js' import chatService from '../services/chat_service/chat_service.js'
import { parseChat, parseChatMessage } from '../services/entity_normalizer/entity_normalizer.service.js' import { parseChat, parseChatMessage } from '../services/entity_normalizer/entity_normalizer.service.js'
@ -13,8 +13,8 @@ const emptyChatList = () => ({
const defaultState = { const defaultState = {
chatList: emptyChatList(), chatList: emptyChatList(),
chatListFetcher: null, chatListFetcher: null,
openedChats: {}, openedChats: reactive({}),
openedChatMessageServices: {}, openedChatMessageServices: reactive({}),
fetcher: undefined, fetcher: undefined,
currentChatId: null, currentChatId: null,
lastReadMessageId: null lastReadMessageId: null
@ -137,10 +137,10 @@ const chats = {
}, },
addOpenedChat (state, { _dispatch, chat }) { addOpenedChat (state, { _dispatch, chat }) {
state.currentChatId = chat.id state.currentChatId = chat.id
Vue.set(state.openedChats, chat.id, chat) state.openedChats[chat.id] = chat
if (!state.openedChatMessageServices[chat.id]) { if (!state.openedChatMessageServices[chat.id]) {
Vue.set(state.openedChatMessageServices, chat.id, chatService.empty(chat.id)) state.openedChatMessageServices[chat.id] = chatService.empty(chat.id)
} }
}, },
setCurrentChatId (state, { chatId }) { setCurrentChatId (state, { chatId }) {
@ -160,7 +160,7 @@ const chats = {
} }
} else { } else {
state.chatList.data.push(updatedChat) state.chatList.data.push(updatedChat)
Vue.set(state.chatList.idStore, updatedChat.id, updatedChat) state.chatList.idStore[updatedChat.id] = updatedChat
} }
}) })
}, },
@ -172,7 +172,7 @@ const chats = {
chat.updated_at = updatedChat.updated_at chat.updated_at = updatedChat.updated_at
} }
if (!chat) { state.chatList.data.unshift(updatedChat) } if (!chat) { state.chatList.data.unshift(updatedChat) }
Vue.set(state.chatList.idStore, updatedChat.id, updatedChat) state.chatList.idStore[updatedChat.id] = updatedChat
}, },
deleteChat (state, { _dispatch, id, _rootGetters }) { deleteChat (state, { _dispatch, id, _rootGetters }) {
state.chats.data = state.chats.data.filter(conversation => state.chats.data = state.chats.data.filter(conversation =>
@ -186,8 +186,8 @@ const chats = {
commit('setChatListFetcher', { fetcher: undefined }) commit('setChatListFetcher', { fetcher: undefined })
for (const chatId in state.openedChats) { for (const chatId in state.openedChats) {
chatService.clear(state.openedChatMessageServices[chatId]) chatService.clear(state.openedChatMessageServices[chatId])
Vue.delete(state.openedChats, chatId) delete state.openedChats[chatId]
Vue.delete(state.openedChatMessageServices, chatId) delete state.openedChatMessageServices[chatId]
} }
}, },
setChatsLoading (state, { value }) { setChatsLoading (state, { value }) {
@ -215,8 +215,8 @@ const chats = {
for (const chatId in state.openedChats) { for (const chatId in state.openedChats) {
if (currentChatId !== chatId) { if (currentChatId !== chatId) {
chatService.clear(state.openedChatMessageServices[chatId]) chatService.clear(state.openedChatMessageServices[chatId])
Vue.delete(state.openedChats, chatId) delete state.openedChats[chatId]
Vue.delete(state.openedChatMessageServices, chatId) delete state.openedChatMessageServices[chatId]
} }
} }
}, },

View File

@ -1,4 +1,3 @@
import { set, delete as del } from 'vue'
import { setPreset, applyTheme } from '../services/style_setter/style_setter.js' import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
import messages from '../i18n/messages' import messages from '../i18n/messages'
@ -98,14 +97,14 @@ const config = {
}, },
mutations: { mutations: {
setOption (state, { name, value }) { setOption (state, { name, value }) {
set(state, name, value) state[name] = value
}, },
setHighlight (state, { user, color, type }) { setHighlight (state, { user, color, type }) {
const data = this.state.config.highlight[user] const data = this.state.config.highlight[user]
if (color || type) { if (color || type) {
set(state.highlight, user, { color: color || data.color, type: type || data.type }) state.highlight[user] = { color: color || data.color, type: type || data.type }
} else { } else {
del(state.highlight, user) delete state.highlight[user]
} }
} }
}, },

View File

@ -1,4 +1,3 @@
import { set } from 'vue'
import { getPreset, applyTheme } from '../services/style_setter/style_setter.js' import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
import apiService from '../services/api/api.service.js' import apiService from '../services/api/api.service.js'
@ -86,7 +85,7 @@ const instance = {
mutations: { mutations: {
setInstanceOption (state, { name, value }) { setInstanceOption (state, { name, value }) {
if (typeof value !== 'undefined') { if (typeof value !== 'undefined') {
set(state, name, value) state[name] = value
} }
}, },
setKnownDomains (state, domains) { setKnownDomains (state, domains) {

View File

@ -1,5 +1,3 @@
import { set, delete as del } from 'vue'
const defaultState = { const defaultState = {
settingsModalState: 'hidden', settingsModalState: 'hidden',
settingsModalLoaded: false, settingsModalLoaded: false,
@ -29,11 +27,10 @@ const interfaceMod = {
if (state.noticeClearTimeout) { if (state.noticeClearTimeout) {
clearTimeout(state.noticeClearTimeout) clearTimeout(state.noticeClearTimeout)
} }
set(state.settings, 'currentSaveStateNotice', { error: false, data: success }) state.settings.currentSaveStateNotice = { error: false, data: success }
set(state.settings, 'noticeClearTimeout', state.settings.noticeClearTimeout = setTimeout(() => delete state.settings.currentSaveStateNotice, 2000)
setTimeout(() => del(state.settings, 'currentSaveStateNotice'), 2000))
} else { } else {
set(state.settings, 'currentSaveStateNotice', { error: true, errorData: error }) state.settings.currentSaveStateNotice = { error: true, errorData: error }
} }
}, },
setNotificationPermission (state, permission) { setNotificationPermission (state, permission) {

View File

@ -1,5 +1,3 @@
import { delete as del } from 'vue'
const oauth = { const oauth = {
state: { state: {
clientId: false, clientId: false,
@ -29,7 +27,7 @@ const oauth = {
state.userToken = false state.userToken = false
// state.token is userToken with older name, coming from persistent state // state.token is userToken with older name, coming from persistent state
// let's clear it as well, since it is being used as a fallback of state.userToken // let's clear it as well, since it is being used as a fallback of state.userToken
del(state, 'token') delete state.token
} }
}, },
getters: { getters: {

View File

@ -1,5 +1,4 @@
import { merge } from 'lodash' import { merge } from 'lodash'
import { set } from 'vue'
const polls = { const polls = {
state: { state: {
@ -13,25 +12,25 @@ const polls = {
// Make expired-state change trigger re-renders properly // Make expired-state change trigger re-renders properly
poll.expired = Date.now() > Date.parse(poll.expires_at) poll.expired = Date.now() > Date.parse(poll.expires_at)
if (existingPoll) { if (existingPoll) {
set(state.pollsObject, poll.id, merge(existingPoll, poll)) state.pollsObject[poll.id] = merge(existingPoll, poll)
} else { } else {
set(state.pollsObject, poll.id, poll) state.pollsObject[poll.id] = poll
} }
}, },
trackPoll (state, pollId) { trackPoll (state, pollId) {
const currentValue = state.trackedPolls[pollId] const currentValue = state.trackedPolls[pollId]
if (currentValue) { if (currentValue) {
set(state.trackedPolls, pollId, currentValue + 1) state.trackedPolls[pollId] = currentValue + 1
} else { } else {
set(state.trackedPolls, pollId, 1) state.trackedPolls[pollId] = 1
} }
}, },
untrackPoll (state, pollId) { untrackPoll (state, pollId) {
const currentValue = state.trackedPolls[pollId] const currentValue = state.trackedPolls[pollId]
if (currentValue) { if (currentValue) {
set(state.trackedPolls, pollId, currentValue - 1) state.trackedPolls[pollId] = currentValue - 1
} else { } else {
set(state.trackedPolls, pollId, 0) state.trackedPolls[pollId] = 0
} }
} }
}, },

View File

@ -12,7 +12,6 @@ import {
isArray, isArray,
omitBy omitBy
} from 'lodash' } from 'lodash'
import { set } from 'vue'
import { import {
isStatusNotification, isStatusNotification,
isValidNotification, isValidNotification,
@ -92,7 +91,7 @@ const mergeOrAdd = (arr, obj, item) => {
// This is a new item, prepare it // This is a new item, prepare it
prepareStatus(item) prepareStatus(item)
arr.push(item) arr.push(item)
set(obj, item.id, item) obj[item.id] = item
return { item, new: true } return { item, new: true }
} }
} }
@ -131,7 +130,7 @@ const addStatusToGlobalStorage = (state, data) => {
if (conversationsObject[conversationId]) { if (conversationsObject[conversationId]) {
conversationsObject[conversationId].push(status) conversationsObject[conversationId].push(status)
} else { } else {
set(conversationsObject, conversationId, [status]) conversationsObject[conversationId] = [status]
} }
} }
return result return result
@ -523,7 +522,7 @@ export const mutations = {
}, },
addEmojiReactionsBy (state, { id, emojiReactions, currentUser }) { addEmojiReactionsBy (state, { id, emojiReactions, currentUser }) {
const status = state.allStatusesObject[id] const status = state.allStatusesObject[id]
set(status, 'emoji_reactions', emojiReactions) status['emoji_reactions'] = emojiReactions
}, },
addOwnReaction (state, { id, emoji, currentUser }) { addOwnReaction (state, { id, emoji, currentUser }) {
const status = state.allStatusesObject[id] const status = state.allStatusesObject[id]
@ -542,9 +541,9 @@ export const mutations = {
// Update count of existing reaction if it exists, otherwise append at the end // Update count of existing reaction if it exists, otherwise append at the end
if (reactionIndex >= 0) { if (reactionIndex >= 0) {
set(status.emoji_reactions, reactionIndex, newReaction) status.emoji_reactions[reactionIndex] = newReaction
} else { } else {
set(status, 'emoji_reactions', [...status.emoji_reactions, newReaction]) status['emoji_reactions'] = [...status.emoji_reactions, newReaction]
} }
}, },
removeOwnReaction (state, { id, emoji, currentUser }) { removeOwnReaction (state, { id, emoji, currentUser }) {
@ -563,9 +562,9 @@ export const mutations = {
} }
if (newReaction.count > 0) { if (newReaction.count > 0) {
set(status.emoji_reactions, reactionIndex, newReaction) status.emoji_reactions[reactionIndex] = newReaction
} else { } else {
set(status, 'emoji_reactions', status.emoji_reactions.filter(r => r.name !== emoji)) status['emoji_reactions'] = status.emoji_reactions.filter(r => r.name !== emoji)
} }
}, },
updateStatusWithPoll (state, { id, poll }) { updateStatusWithPoll (state, { id, poll }) {

View File

@ -1,7 +1,6 @@
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import oauthApi from '../services/new_api/oauth.js' import oauthApi from '../services/new_api/oauth.js'
import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash' import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
import { set } from 'vue'
import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js' import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
// TODO: Unify with mergeOrAdd in statuses.js // TODO: Unify with mergeOrAdd in statuses.js
@ -15,9 +14,9 @@ export const mergeOrAdd = (arr, obj, item) => {
} else { } else {
// This is a new item, prepare it // This is a new item, prepare it
arr.push(item) arr.push(item)
set(obj, item.id, item) obj[item.id] = item
if (item.screen_name && !item.screen_name.includes('@')) { if (item.screen_name && !item.screen_name.includes('@')) {
set(obj, item.screen_name.toLowerCase(), item) obj[item.screen_name.toLowerCase()] = item
} }
return { item, new: true } return { item, new: true }
} }
@ -103,23 +102,23 @@ export const mutations = {
const user = state.usersObject[id] const user = state.usersObject[id]
const tags = user.tags || [] const tags = user.tags || []
const newTags = tags.concat([tag]) const newTags = tags.concat([tag])
set(user, 'tags', newTags) user['tags'] = newTags
}, },
untagUser (state, { user: { id }, tag }) { untagUser (state, { user: { id }, tag }) {
const user = state.usersObject[id] const user = state.usersObject[id]
const tags = user.tags || [] const tags = user.tags || []
const newTags = tags.filter(t => t !== tag) const newTags = tags.filter(t => t !== tag)
set(user, 'tags', newTags) user['tags'] = newTags
}, },
updateRight (state, { user: { id }, right, value }) { updateRight (state, { user: { id }, right, value }) {
const user = state.usersObject[id] const user = state.usersObject[id]
let newRights = user.rights let newRights = user.rights
newRights[right] = value newRights[right] = value
set(user, 'rights', newRights) user['rights'] = newRights
}, },
updateActivationStatus (state, { user: { id }, deactivated }) { updateActivationStatus (state, { user: { id }, deactivated }) {
const user = state.usersObject[id] const user = state.usersObject[id]
set(user, 'deactivated', deactivated) user['deactivated'] = deactivated
}, },
setCurrentUser (state, user) { setCurrentUser (state, user) {
state.lastLoginName = user.screen_name state.lastLoginName = user.screen_name
@ -148,26 +147,26 @@ export const mutations = {
clearFriends (state, userId) { clearFriends (state, userId) {
const user = state.usersObject[userId] const user = state.usersObject[userId]
if (user) { if (user) {
set(user, 'friendIds', []) user['friendIds'] = []
} }
}, },
clearFollowers (state, userId) { clearFollowers (state, userId) {
const user = state.usersObject[userId] const user = state.usersObject[userId]
if (user) { if (user) {
set(user, 'followerIds', []) user['followerIds'] = []
} }
}, },
addNewUsers (state, users) { addNewUsers (state, users) {
each(users, (user) => { each(users, (user) => {
if (user.relationship) { if (user.relationship) {
set(state.relationships, user.relationship.id, user.relationship) state.relationships[user.relationship.id] = user.relationship
} }
mergeOrAdd(state.users, state.usersObject, user) mergeOrAdd(state.users, state.usersObject, user)
}) })
}, },
updateUserRelationship (state, relationships) { updateUserRelationship (state, relationships) {
relationships.forEach((relationship) => { relationships.forEach((relationship) => {
set(state.relationships, relationship.id, relationship) state.relationships[relationship.id] = relationship
}) })
}, },
saveBlockIds (state, blockIds) { saveBlockIds (state, blockIds) {
@ -222,7 +221,7 @@ export const mutations = {
}, },
setColor (state, { user: { id }, highlighted }) { setColor (state, { user: { id }, highlighted }) {
const user = state.usersObject[id] const user = state.usersObject[id]
set(user, 'highlight', highlighted) user['highlight'] = highlighted
}, },
signUpPending (state) { signUpPending (state) {
state.signUpPending = true state.signUpPending = true