优化store

src/render/api/entity.js

@@ -8,7 +8,9 @@ const load   = (value)   => {
   // 将卫星状态信息存储到store中
   const satellites = filter('Satellite')
   const satellite_state_arr = satellites.map(({ id, show }) => { return { id, show } })
-  store.commit('satellites/set', satellite_state_arr)
+  store.dispatch('satelliteSystem/setSatellites', {
+    satellites: satellite_state_arr
+  })
 }
 
 const get    = id      => entities.find(entity => entity.id === id)

src/render/components/EarthView.vue

@@ -23,7 +23,7 @@ import entity from '../api/entity'
 
 // 卫星轨道数据处理
 const store = useStore()
-const czml  = computed(() => './CZML/' + store.state.satelliteSystem.name + '.czml')
+const czml  = computed(() => './CZML/' + store.getters["satelliteSystem/name"] + '.czml')
 const onDataSourceReady = ({ viewer, cesiumObject }) => {
   viewer.flyTo(cesiumObject)
   entity.load(cesiumObject.entities.values)
@@ -34,9 +34,9 @@ const onDataSourceReady = ({ viewer, cesiumObject }) => {
 
 // 显示/隐藏、跟踪卫星等交互操作
 let vcViewerInstance = null
-store.subscribe(({ type, payload }) => {
+store.subscribeAction(({ type, payload }) => {
   // 显示/隐藏卫星
-  if (type === 'satellites/toggleShow') {
+  if (type === 'satelliteSystem/toggleShow') {
     const satellite = entity.get(payload)
     if (!satellite) return
 
@@ -44,7 +44,7 @@ store.subscribe(({ type, payload }) => {
   }
 
   // 跟踪卫星
-  if (type === 'satellites/track') {
+  if (type === 'satelliteSystem/track') {
     const satellite = entity.get(payload)
     if (!satellite || !vcViewerInstance) return
 

src/render/components/FlagView.vue

@@ -9,7 +9,7 @@ import { computed } from 'vue'
 import { useStore } from 'vuex'
 
 const store = useStore()
-const src   = computed(() => './image/flag/' + store.state.satelliteSystem.name + '.png')
+const src   = computed(() => './image/flag/' + store.getters["satelliteSystem/name"] + '.png')
 </script>
 
 <style scoped>

src/render/components/SatelliteSystemSelectView.vue

@@ -17,7 +17,9 @@ import { ref, watch, onMounted } from 'vue'
 
 const store    = useStore()
 const selected = ref('')
-watch(selected, (value) => store.commit('satelliteSystem/set', value))
+watch(selected, (value) => store.dispatch('satelliteSystem/setName', {
+  name: value
+}))
 onMounted(() => selected.value = Object.keys(option_dic)[0])
 
 const option_dic = {

src/render/components/SatelliteTableView.vue

@@ -44,16 +44,16 @@ import { useStore } from 'vuex'
 import { ref, computed, watch } from 'vue'
 
 
-const show           = ref(false)
+const show = ref(false)
+    
+const store                      = useStore()
+const satellites                 = computed(() => store.getters["satelliteSystem/satellites"])
+const onTrackButtonClicked       = id => store.dispatch('satelliteSystem/track', id)
+const onShowStateCheckboxChanged = id => store.dispatch('satelliteSystem/toggleShow', id)
 
 // 表格数据更新时，滚动条回到最顶部
 const satelliteTable = ref(null)
 watch(satellites, () => satelliteTable.value.scrollTop = 0)
-    
-const store                      = useStore()
-const satellites                 = computed(() => store.state.satellites.all)
-const onTrackButtonClicked       = id => store.commit('satellites/track', id)
-const onShowStateCheckboxChanged = id => store.commit('satellites/toggleShow', id)
 </script>
 
 <style scoped>

src/render/store/index.js

@@ -1,5 +1,4 @@
 import { createStore } from 'vuex'
-import satellites from './modules/satellites'
 import satelliteSystem from './modules/satelliteSystem'
 
 
@@ -7,7 +6,6 @@ const debug = process.env.NODE_ENV !== 'production'
 
 export default createStore({
   modules: {
-    satellites,
     satelliteSystem
   },
   strict: debug

src/render/store/modules/satelliteSystem.js

@@ -1,30 +1,44 @@
 const state = {
-  name: ''
+  name: '',
+  satellites: []
 }
 
 // getters
-// const getters = {
-//   get: (state) => state.name
-// }
+const getters = {
+  name: (state) => state.name,
+  satellites: (state) => state.satellites
+}
 
 // actions
 const actions = {
-  set ({ commit }, { satelliteSystem }) {
-    commit('set', satelliteSystem)
-  }
+  setName ({ commit }, { name }) {
+    commit('setName', name)
+  },
+
+  setSatellites ({ commit }, { satellites }) {
+    commit('setSatellites', satellites)
+  },
+
+  track () {},
+
+  toggleShow () {},
 }
 
 // mutations
 const mutations = {
-  set (state, satelliteSystem) {
-    state.name = satelliteSystem
-  }
+  setName (state, name) {
+    state.name = name
+  },
+
+  setSatellites (state, satellites) {
+    state.satellites = satellites
+  },
 }
 
 export default {
   namespaced: true,
   state,
-  // getters,
+  getters,
   actions,
   mutations
 }

src/render/store/modules/satellites.js

@@ -1,37 +0,0 @@
-const state = {
-  all:  []
-}
-
-// getters
-// const getters = {
-//   getSatelliteList: (state) => state.all
-// }
-
-// actions
-// const actions = {
-//   load ({ commit }, { satellites }) {
-//     commit('set', satellites)
-//   }
-// }
-
-// mutations
-const mutations = {
-  set (state, satellites) {
-    state.all = satellites
-  },
-
-  toggleShow (state, id) {
-    const satellite = state.all.find(satellite => satellite.id === id)
-    satellite.show = !satellite.show
-  },
-
-  track () {}
-}
-
-export default {
-  namespaced: true,
-  state,
-  // getters,
-  // actions,
-  mutations
-}