Switch to pinia

package.json

@@ -19,10 +19,10 @@
  "core-js": "^3.6.5",
  "firebase": "^9.6.1",
  "material-design-icons": "^3.0.1",
+ "pinia": "^2.1.3",
  "register-service-worker": "^1.7.1",
  "vue": "^3.0.0",
- "vue-router": "^4.0.0-0",
- "vuex": "^4.0.0-0"
+ "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
  "@types/google.maps": "^3.47.0",

src/App.vue

@@ -5,20 +5,20 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useStore } from "vuex";
-import { key } from "./store";
 import { getDeviceType } from "@/utils";
+import { useDeviceStore } from "./stores/device";
 
 export default defineComponent({
  setup() {
- const store = useStore(key);
+ const deviceStore = useDeviceStore();
+ const { saveDeviceType } = deviceStore;
 
  const onWindowResize = (): void => {
- store.dispatch("setDeviceTypeAction", { device: getDeviceType() });
+ saveDeviceType(getDeviceType());
  };
 
  onMounted(() => {
- store.dispatch("setDeviceTypeAction", { device: getDeviceType() });
+ saveDeviceType(getDeviceType());
  window.addEventListener("resize", onWindowResize);
  });
  },

src/components/Game/Map.vue

@@ -5,10 +5,7 @@
  :class="$style['map']"
  />
  <IconButton
- v-if="
- store.state.generalSettings.device <= DEVICE_TYPES.MOBLE_PORTRAIT &&
- isMakeGuessButtonClicked
- "
+ v-if="device <= DEVICE_TYPES.MOBLE_PORTRAIT && isMakeGuessButtonClicked"
  :icon="'close'"
  :style="{
  zIndex: '1',
@@ -23,18 +20,20 @@
 </template>
 
 <script lang="ts">
-/*global google*/
 import { defineComponent, onMounted, ref, watch, PropType } from "vue";
-import { useStore } from "vuex";
-import { key } from "@/store";
 import { DEVICE_TYPES } from "@/constants";
 import IconButton from "@/components/shared/IconButton.vue";
+import { DeviceTypes } from "@/types";
 
 export default defineComponent({
  components: {
  IconButton,
  },
  props: {
+ device: {
+ type: Object as PropType<DeviceTypes>,
+ required: true,
+ },
  selectedMode: {
  type: String,
  required: true,
@@ -58,7 +57,6 @@ export default defineComponent({
  let map: google.maps.Map;
  const mapRef = ref<HTMLElement>();
  const markers: google.maps.Marker[] = [];
- const store = useStore(key);
 
  watch(
  () => props.isMakeGuessButtonClicked,
@@ -126,7 +124,6 @@ export default defineComponent({
 
  return {
  mapRef,
- store,
  DEVICE_TYPES,
  onClickHideMapButton,
  };

src/components/Game/StreetView.vue

@@ -1,5 +1,8 @@
 <template>
- <div ref="streetviewRef" :class="$style['street-view']" />
+ <div
+ ref="streetviewRef"
+ :class="$style['street-view']"
+ />
 </template>
 
 <script lang="ts">