Skip to content

Commit

Permalink
Replace Vuex with Pinia
Browse files Browse the repository at this point in the history
  • Loading branch information
@jason5ng32
jason5ng32 committed May 12, 2024
1 parent 215a700 commit c076850
Show file tree
Hide file tree
Showing 24 changed files with 341 additions and 241 deletions.
24 changes: 10 additions & 14 deletions frontend/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,23 +51,23 @@ import HelpModal from './components/help.vue'
import PWA from './components/pwa.vue'
import AdvancedTools from './components/advanced.vue'
import Preferences from './components/preferences.vue';
import { mappingKeys, navigateCards, keyMap, ShortcutKeys } from "./utils/shortcut.js";
import { mappingKeys, keyMap, ShortcutKeys } from "./utils/shortcut.js";
import {maskedInfo } from "./utils/masked-info.js";
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { ref, watch, computed } from 'vue';
import { useMainStore } from '@/store';
import { Modal, Toast, Offcanvas } from 'bootstrap';
export default {
// 引入 Store
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const configs = computed(() => store.state.configs);
const userPreferences = computed(() => store.state.userPreferences);
const shouldRefreshEveryThing = computed(() => store.state.shouldRefreshEveryThing);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
const configs = computed(() => store.configs);
const userPreferences = computed(() => store.userPreferences);
const shouldRefreshEveryThing = computed(() => store.shouldRefreshEveryThing);
const shouldRefresh = ref(false);
watch(shouldRefreshEveryThing, (newVal) => {
Expand Down Expand Up @@ -141,10 +141,6 @@ export default {
}
},
// 设置 isMobile
handleResize() {
this.$store.commit('setIsMobile', window.innerWidth < 768);
},
// 显示 Toast
showToast(duration = 2000) {
this.$nextTick(() => {
Expand Down Expand Up @@ -189,7 +185,7 @@ export default {
];
this.scheduleTimedTasks(refreshTasks);
this.infoMaskLevel = 0;
this.$store.commit('setRefreshEveryThing', false);
this.store.setRefreshEverything(false);
},
// 刷新完成后显示 Toast
Expand Down
8 changes: 4 additions & 4 deletions frontend/components/advanced-tools/censorship-check.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,16 +159,16 @@

<script>
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
export default {
name: 'CensorshipCheck',
// 引入 Store
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
return {
isDarkMode,
Expand Down
8 changes: 4 additions & 4 deletions frontend/components/advanced-tools/dns-resolver.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,15 @@

<script>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
export default {
name: 'DNSResolver',
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
return {
isDarkMode,
Expand Down
10 changes: 5 additions & 5 deletions frontend/components/advanced-tools/global-latency.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@

<script>
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
import svgMap from 'svgmap';
import 'svgmap/dist/svgMap.min.css';
Expand All @@ -100,11 +100,11 @@ export default {
// 引入 Store
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
let allIPs = computed(() => {
const _allIPs = store.state.Global_ipDataCards;
const _allIPs = store.Global_ipDataCards;
return _allIPs.filter(ip => ip && !ip.includes(' ') && !ip.includes(':'));
});
Expand Down
8 changes: 4 additions & 4 deletions frontend/components/advanced-tools/invisibility-test.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,15 +263,15 @@

<script>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
export default {
name: 'InvisibilityTest',
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
return {
isDarkMode,
Expand Down
10 changes: 5 additions & 5 deletions frontend/components/advanced-tools/mtr-test.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,18 +79,18 @@

<script>
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
export default {
name: 'MTRtest',
// 引入 Store
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
let allIPs = computed(() => {
const _allIPs = store.state.Global_ipDataCards;
const _allIPs = store.Global_ipDataCards;
return _allIPs.filter(ip => ip && !ip.includes(' ') && !ip.includes(':'));
});
Expand Down
11 changes: 6 additions & 5 deletions frontend/components/advanced-tools/rule-test.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
import countryLookup from 'country-code-lookup';
Expand All @@ -64,13 +64,14 @@ export default {
// 引入 Store
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
return {
isDarkMode,
isMobile,
store,
};
},
Expand Down Expand Up @@ -155,7 +156,7 @@ export default {
watch: {
IPArray: {
handler() {
this.$store.commit('updateGlobalIpDataCards', this.IPArray);
this.store.updateGlobalIpDataCards(this.IPArray);
},
deep: true,
},
Expand Down
8 changes: 4 additions & 4 deletions frontend/components/advanced-tools/whois.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,15 @@

<script>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
export default {
name: 'Whois',
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
return {
isDarkMode,
Expand Down
12 changes: 6 additions & 6 deletions frontend/components/advanced.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,18 +52,18 @@

<script>
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
import { Offcanvas } from 'bootstrap';
export default {
name: 'AdvancedTools',
// 引入 Store
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const configs = computed(() => store.state.configs);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
const configs = computed(() => store.configs);
return {
Expand Down Expand Up @@ -176,7 +176,7 @@ export default {
}
.jn-h {
height: 80%;
height: 80% !important;
}
.jn-bold {
Expand Down
10 changes: 5 additions & 5 deletions frontend/components/connectivity-test.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
import { Toast, } from 'bootstrap';
Expand All @@ -71,10 +71,10 @@ export default {
// 引入 Store
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const userPreferences = computed(() => store.state.userPreferences);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
const userPreferences = computed(() => store.userPreferences);
return {
isDarkMode,
Expand Down
10 changes: 5 additions & 5 deletions frontend/components/dns-leaks-test.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,18 +50,18 @@

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
import countryLookup from 'country-code-lookup';
export default {
name: 'DNSLeaks',
// 引入 Store
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const userPreferences = computed(() => store.state.userPreferences);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
const userPreferences = computed(() => store.userPreferences);
return {
isDarkMode,
Expand Down
10 changes: 5 additions & 5 deletions frontend/components/footer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@

<script>
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
import { Offcanvas } from 'bootstrap';
import '@khmyznikov/pwa-install';
Expand All @@ -128,10 +128,10 @@ export default {
// 引入 Store
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const configs = computed(() => store.state.configs);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
const configs = computed(() => store.configs);
return {
isDarkMode,
Expand Down
8 changes: 4 additions & 4 deletions frontend/components/help.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,17 +48,17 @@

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { useMainStore } from '@/store';
import { Modal } from 'bootstrap';
export default {
name: 'HelpModal',
// 引入 Store
setup() {
const store = useStore();
const isDarkMode = computed(() => store.state.isDarkMode);
const isMobile = computed(() => store.state.isMobile);
const store = useMainStore();
const isDarkMode = computed(() => store.isDarkMode);
const isMobile = computed(() => store.isMobile);
return {
isDarkMode,
Expand Down
Loading

0 comments on commit c076850

Please sign in to comment.