Vue3 + Vite + Pinia + new to Vue, having a hard time making the store functionalities work

Having trouble making Pinia work following the documentation and cheat sheet. It doesn't say WHERE to put WHAT and HOW. So I'm a bit lost, and newish to Vue too.

I'm trying to set up a series of dropdowns (I'm just including "city" here) and a Google map that can take that data and display it. But I can't get the store working.

Just a little note, please remember that other people have different learning styles and some, like me, have learning disabilities. So what might seem like a "dumb" question might be challenging with someone with my disabilities. Thanks!

src/main.js

import './assets/main.css'
import './scss/styles.scss'
import * as bootstrap from 'bootstrap'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

src/stores/incidentStore.js

    import { ref, computed } from 'vue'
    import { defineStore } from 'pinia'

export const useIncidentStore = defineStore('incidentData', {
  state: () => ({
    ALL_DATA: {},
    selectedCity: '',
    selectedLocation: '',
    selectedReason: '',
    selectedCondition: '',
    selectedType: ''
  }),
  getters: {},
  actions: {
    setData(data) {
      this.ALL_DATA = data
    },
    setCity(city) {
      this.selectedCity = city
    },
    setLocation(location) {
      this.selectedLocation = location
    },
    setReason(reason) {
      this.selectedReason = reason
    },
    setCondition(condition) {
      this.selectedCondition = condition
    },
    setType(type) {
      this.selectedType = type
    }
  }
})

SomeComponent.vue

<script setup>
import { useIncidentStore } from '../stores/IncidentStore'
const store = useIncidentStore()
</script>

<template>
  <form>
    <div class="form-group">
      <label for="i_city">City</label>
      <select
        v-model="city"
        class="form-control"
        id="i_city"
        @change="($event) => store.setCity(city)"
      >
        <option v-for="y in dropdownData.cities" :value="y">
          {{ y }}
        </option>
      </select>
    </div>
    </form>
 </template>


<script>
export default {
  data() {
    return {
      city: null
      dropdownData: {
        cities: []
      }
    }
  },
  mounted() {
    this.fetchDropdownData()
  },
  methods: {
 
    fetchDropdownData() {
      const re =
        /\bIn|East of|West of|South of|North of|North West of|South West of|North East of|South East of|Near/gi
      fetch(`${import.meta.env.VITE_API_VERBOSE}`)
        .then((response) => {
          if (!response.ok) {
            throw new Error('Network response was not ok')
          }
          return response.json()
        })
        .then((data) => {
          // Create a new reactive object using Vue.set or spread operator
          this.dropdownData = {
            cities: new Set(data.map((el) => el.city.substring(0, 50)).sort())
          }
          console.log('this.dropDownData', this.dropdownData)
        })
        .catch((error) => {
          // Handle error
          console.error('Error:', error)
        })
    },
    getData() {
    
      console.log('selected_city', store.selectedCity)
    }
  }
}
</script>

ERRORS:

Literally no way that I try to set this up following these bizarro instructions make this work as advertised. How is this "easier" than VUEX??

So what do I need to do to get the dropdown menu to set the city and then show it in the console log at the bottom in getData()?

So, first error is solved, probably, but second error now says that "store is not defined" in the method getData(). Is there some magic trick I need to actually display the data? Thanks!

This attempt to call store.setCityValue() here:

@change="($event) => store.setCityValue(city)"

does not work because there is no action on the store called setCityValue

actions: {
    setData(data) {
      this.ALL_DATA = data
    },
    setCity(city) {
      this.selectedCity = city
    },
    setLocation(location) {
      this.selectedLocation = location
    },
    setCity(reason) {
      this.selectedReason = reason
    },
    setCondition(condition) {
      this.selectedCondition = condition
    },
    setType(type) {
      this.selectedType = type
    }
  }

There are two actions called setCity. I think maybe the first one just needs it's name changed to setCityValue