feat: use pinia instead of vuex to manage status

This commit is contained in:
周陆陆 2023-02-15 19:23:33 +08:00
parent 90e3f7491a
commit 01916724cb
8 changed files with 61 additions and 68 deletions

View File

@ -25,9 +25,9 @@
"jszip": "^3.10.0", "jszip": "^3.10.0",
"object-hash": "^3.0.0", "object-hash": "^3.0.0",
"perfect-scrollbar": "^1.5.2", "perfect-scrollbar": "^1.5.2",
"pinia": "^2.0.30",
"vue": "^3.2.30", "vue": "^3.2.30",
"vue-i18n": "^9.2.0-beta.9", "vue-i18n": "^9.2.0-beta.9"
"vuex": "^4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.0", "@babel/core": "^7.17.0",

View File

@ -197,7 +197,7 @@ const codeVisible = ref(false)
function handleAction(actionType: ActionType) { function handleAction(actionType: ActionType) {
switch (actionType) { switch (actionType) {
case ActionType.Undo: case ActionType.Undo:
store.commit(UNDO) store[UNDO]()
recordEvent('action_undo', { recordEvent('action_undo', {
event_category: 'action', event_category: 'action',
event_label: 'Undo', event_label: 'Undo',
@ -205,7 +205,7 @@ function handleAction(actionType: ActionType) {
break break
case ActionType.Redo: case ActionType.Redo:
store.commit(REDO) store[REDO]()
recordEvent('action_redo', { recordEvent('action_redo', {
event_category: 'action', event_category: 'action',
event_label: 'Redo', event_label: 'Redo',

View File

@ -32,8 +32,8 @@ const { t } = useI18n()
const store = useStore() const store = useStore()
const canUndo = computed(() => store.state.history.past.length > 0) const canUndo = computed(() => store.history.past.length > 0)
const canRedo = computed(() => store.state.history.future.length > 0) const canRedo = computed(() => store.history.future.length > 0)
const actions = computed(() => [ const actions = computed(() => [
{ {

View File

@ -7,10 +7,10 @@ import type { AvatarOption } from '@/types'
export default function useAvatarOption() { export default function useAvatarOption() {
const store = useStore() const store = useStore()
const avatarOption = computed(() => store.state.history.present) const avatarOption = computed(() => store.history.present)
const setAvatarOption = (newOption: AvatarOption) => { const setAvatarOption = (newOption: AvatarOption) => {
store.commit(SET_AVATAR_OPTION, newOption) store[SET_AVATAR_OPTION](newOption)
} }
return [avatarOption, setAvatarOption] as const return [avatarOption, setAvatarOption] as const

View File

@ -6,14 +6,14 @@ import { SET_SIDER_STATUS } from '@/store/mutation-type'
export default function useSider() { export default function useSider() {
const store = useStore() const store = useStore()
const isCollapsed = computed(() => store.state.isSiderCollapsed) const isCollapsed = computed(() => store.isSiderCollapsed)
const openSider = () => { const openSider = () => {
store.commit(SET_SIDER_STATUS, false) store[SET_SIDER_STATUS](false)
} }
const closeSider = () => { const closeSider = () => {
store.commit(SET_SIDER_STATUS, true) store[SET_SIDER_STATUS](true)
} }
return { isCollapsed, openSider, closeSider } return { isCollapsed, openSider, closeSider }

View File

@ -2,16 +2,15 @@ import 'perfect-scrollbar/css/perfect-scrollbar.css'
import './styles/reset.css' import './styles/reset.css'
import './styles/global.scss' import './styles/global.scss'
import { createPinia } from 'pinia'
import { createApp } from 'vue' import { createApp } from 'vue'
import store, { storeKey } from '@/store'
import App from './App.vue' import App from './App.vue'
import i18n from './i18n' import i18n from './i18n'
const app = createApp(App) const app = createApp(App)
app.use(store, storeKey) app.use(createPinia())
app.use(i18n) app.use(i18n)

View File

@ -1,5 +1,4 @@
import { type InjectionKey } from 'vue' import { defineStore } from 'pinia'
import { type Store, createStore, useStore as baseUseStore } from 'vuex'
import { WrapperShape } from '@/enums' import { WrapperShape } from '@/enums'
import type { AvatarOption } from '@/types' import type { AvatarOption } from '@/types'
@ -22,64 +21,53 @@ export interface State {
isSiderCollapsed: boolean isSiderCollapsed: boolean
} }
export default createStore<State>({ export const useStore = defineStore('store', {
strict: true, state: () =>
({
state: {
history: { history: {
past: [], past: [],
present: getRandomAvatarOption({ wrapperShape: WrapperShape.Squircle }), present: getRandomAvatarOption({ wrapperShape: WrapperShape.Squircle }),
future: [], future: [],
}, },
isSiderCollapsed: window.innerWidth <= SCREEN.lg, isSiderCollapsed: window.innerWidth <= SCREEN.lg,
}, } as State),
actions: {
mutations: { [SET_AVATAR_OPTION](data: AvatarOption) {
[SET_AVATAR_OPTION](state, data: AvatarOption) { this.history = {
state.history = { past: [...this.history.past, this.history.present],
past: [...state.history.past, state.history.present],
present: data, present: data,
future: [], future: [],
} }
}, },
[UNDO](state) { [UNDO]() {
if (state.history.past.length > 0) { if (this.history.past.length > 0) {
const previous = state.history.past[state.history.past.length - 1] const previous = this.history.past[this.history.past.length - 1]
const newPast = state.history.past.slice( const newPast = this.history.past.slice(0, this.history.past.length - 1)
0, this.history = {
state.history.past.length - 1
)
state.history = {
past: newPast, past: newPast,
present: previous, present: previous,
future: [state.history.present, ...state.history.future], future: [this.history.present, ...this.history.future],
} }
} }
}, },
[REDO](state) { [REDO]() {
if (state.history.future.length > 0) { if (this.history.future.length > 0) {
const next = state.history.future[0] const next = this.history.future[0]
const newFuture = state.history.future.slice(1) const newFuture = this.history.future.slice(1)
state.history = { this.history = {
past: [...state.history.past, state.history.present], past: [...this.history.past, this.history.present],
present: next, present: next,
future: newFuture, future: newFuture,
} }
} }
}, },
[SET_SIDER_STATUS](state, collapsed) { [SET_SIDER_STATUS](collapsed: boolean) {
if (collapsed !== state.isSiderCollapsed) { if (collapsed !== this.isSiderCollapsed) {
state.isSiderCollapsed = collapsed this.isSiderCollapsed = collapsed
} }
}, },
}, },
}) })
export const storeKey: InjectionKey<Store<State>> = Symbol()
export function useStore() {
return baseUseStore(storeKey)
}

View File

@ -1959,16 +1959,16 @@
"@vue/compiler-dom" "3.2.30" "@vue/compiler-dom" "3.2.30"
"@vue/shared" "3.2.30" "@vue/shared" "3.2.30"
"@vue/devtools-api@^6.0.0-beta.11":
version "6.0.0-beta.19"
resolved "https://registry.npmmirror.com/@vue/devtools-api/download/@vue/devtools-api-6.0.0-beta.19.tgz?cache=0&sync_timestamp=1633376469341&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vue%2Fdevtools-api%2Fdownload%2F%40vue%2Fdevtools-api-6.0.0-beta.19.tgz#f8e88059daa424515992426a0c7ea5cde07e99bf"
integrity sha1-+OiAWdqkJFFZkkJqDH6lzeB+mb8=
"@vue/devtools-api@^6.0.0-beta.13": "@vue/devtools-api@^6.0.0-beta.13":
version "6.0.0-beta.18" version "6.0.0-beta.18"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.18.tgz#84c0aff9289a57294cb97490811f69e8a0a67f8a" resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.18.tgz#84c0aff9289a57294cb97490811f69e8a0a67f8a"
integrity sha512-56vRhO7nXWWFYTx520BQSDlQH5VYpwy62hFDEqi2yHHEBpEqseOP5WYQusq7BEW3DXSY9E9cfPVR5CFtJbKuMg== integrity sha512-56vRhO7nXWWFYTx520BQSDlQH5VYpwy62hFDEqi2yHHEBpEqseOP5WYQusq7BEW3DXSY9E9cfPVR5CFtJbKuMg==
"@vue/devtools-api@^6.4.5":
version "6.5.0"
resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
"@vue/reactivity-transform@3.2.30": "@vue/reactivity-transform@3.2.30":
version "3.2.30" version "3.2.30"
resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.30.tgz#2006e9f4645777a481b78ae77fc486159afa8480" resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.30.tgz#2006e9f4645777a481b78ae77fc486159afa8480"
@ -6161,6 +6161,14 @@ pify@^4.0.0, pify@^4.0.1:
resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231" resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g== integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
pinia@^2.0.30:
version "2.0.30"
resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.30.tgz#b18a581dad6821ed5fbebfaf631229480ea9d2d9"
integrity sha512-q6DUmxWwe/mQgg+55QQjykpKC+aGeGdaJV3niminl19V08dE+LRTvSEuqi6/NLSGCKHI49KGL6tMNEOssFiMyA==
dependencies:
"@vue/devtools-api" "^6.4.5"
vue-demi "*"
pirates@^4.0.1: pirates@^4.0.1:
version "4.0.1" version "4.0.1"
resolved "https://registry.nlark.com/pirates/download/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87" resolved "https://registry.nlark.com/pirates/download/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
@ -8172,6 +8180,11 @@ vscode-vue-languageservice@0.31.2:
vscode-pug-languageservice "0.31.2" vscode-pug-languageservice "0.31.2"
vscode-typescript-languageservice "0.31.2" vscode-typescript-languageservice "0.31.2"
vue-demi@*:
version "0.13.11"
resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
vue-eslint-parser@^8.0.1: vue-eslint-parser@^8.0.1:
version "8.0.1" version "8.0.1"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.0.1.tgz#25e08b20a414551531f3e19f999902e1ecf45f13" resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.0.1.tgz#25e08b20a414551531f3e19f999902e1ecf45f13"
@ -8214,13 +8227,6 @@ vue@^3.2.30:
"@vue/server-renderer" "3.2.30" "@vue/server-renderer" "3.2.30"
"@vue/shared" "3.2.30" "@vue/shared" "3.2.30"
vuex@^4.0.2:
version "4.0.2"
resolved "https://registry.nlark.com/vuex/download/vuex-4.0.2.tgz?cache=0&sync_timestamp=1623945218026&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvuex%2Fdownload%2Fvuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
integrity sha1-+Jbb1b8qDpY/AMZ+m2EN50nMrMk=
dependencies:
"@vue/devtools-api" "^6.0.0-beta.11"
w3c-hr-time@^1.0.2: w3c-hr-time@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.nlark.com/w3c-hr-time/download/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd" resolved "https://registry.nlark.com/w3c-hr-time/download/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"