persist channel

src/components/midjourney/ChannelSelector.vue

@@ -3,7 +3,7 @@
     <el-button
       v-for="(option, optionKey) in options"
       :key="optionKey"
-      :class="{ button: true, active: option.name === value.name }"
+      :class="{ button: true, active: option.name === channel.name }"
       @click="onSelect(option)"
     >
       <font-awesome-icon :class="{ icon: true, [option.name]: true }" :icon="option.icon" />
@@ -31,35 +31,20 @@ export default defineComponent({
     ElButton,
     FontAwesomeIcon
   },
-  props: {
-    modelValue: {
-      type: Object as () => IMidjourneyChannel,
-      required: true
-    }
-  },
   emits: ['update:modelValue', 'select'],
   data() {
     return {
-      value: this.modelValue,
       options: [MIDJOURNEY_CHANNEL_FAST, MIDJOURNEY_CHANNEL_RELAX, MIDJOURNEY_CHANNEL_TURBO]
     };
   },
-  watch: {
-    modelValue(val) {
-      if (val !== this.value) {
-        this.value = val;
-      }
+  computed: {
+    channel() {
+      return this.$store.state.midjourney.channel;
     }
   },
-  mounted() {
-    this.$emit('update:modelValue', this.value);
-    this.$emit('select', this.value);
-  },
   methods: {
     onSelect(option: IMidjourneyChannel) {
-      this.value = option;
-      this.$emit('update:modelValue', option);
-      this.$emit('select', option);
+      this.$store.dispatch('midjourney/setChannel', option);
     }
   }
 });

src/pages/midjourney/History.vue

@@ -4,7 +4,7 @@
       <preset-panel />
     </div>
     <div class="main">
-      <channel-selector v-model="channel" class="mb-4" @select="onSelectChannel" />
+      <channel-selector class="mb-4" @select="onSelectChannel" />
       <api-status
         :initializing="initializing"
         :application="application"
@@ -43,7 +43,6 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Status } from '@/store/common/models';
 
 interface IData {
-  channel: IMidjourneyChannel;
   prompt: string;
   elements: string[];
   ignore: string;
@@ -63,13 +62,15 @@ export default defineComponent({
   },
   data(): IData {
     return {
-      channel: MIDJOURNEY_CHANNEL_FAST,
       prompt: '',
       elements: [],
       ignore: ''
     };
   },
   computed: {
+    channel() {
+      return this.$store.state.midjourney.channel;
+    },
     applications() {
       return this.$store.state.midjourney.applications;
     },
@@ -95,9 +96,6 @@ export default defineComponent({
     async onGetApplications() {
       await this.$store.dispatch('midjourney/getApplications');
     },
-    async onSelectChannel() {
-      await this.onGetApplications();
-    },
     async onStartTask(request: IMidjourneyImagineRequest) {
       const token = this.application?.credential?.token;
       const endpoint = this.application?.api?.endpoint;

src/pages/midjourney/Index.vue

@@ -4,7 +4,7 @@
       <preset-panel />
     </div>
     <div class="main">
-      <channel-selector v-model="channel" class="mb-4" @select="onSelectChannel" />
+      <channel-selector class="mb-4" />
       <api-status
         :initializing="initializing"
         :application="application"
@@ -56,7 +56,6 @@ import { ERROR_CODE_DUPLICATION } from '@/constants/errorCode';
 import { Status } from '@/store/common/models';
 
 interface IData {
-  channel: IMidjourneyChannel;
   prompt: string;
   elements: string[];
   ignore: string;
@@ -81,14 +80,16 @@ export default defineComponent({
   },
   data(): IData {
     return {
-      channel: MIDJOURNEY_CHANNEL_FAST,
       prompt: '',
       elements: [],
       ignore: '',
       references: []
     };
   },
   computed: {
+    channel() {
+      return this.$store.state.midjourney.channel;
+    },
     preset() {
       return this.$store.state.midjourney.preset;
     },
@@ -168,9 +169,6 @@ export default defineComponent({
           }
         });
     },
-    async onSelectChannel() {
-      await this.onGetApplications();
-    },
     async onGetApplications() {
       await this.$store.dispatch('midjourney/getApplications');
     },

src/store/index.ts

@@ -17,6 +17,8 @@ const store = createStore({
         'user',
         'chat.applications',
         'chat.conversations',
+        'midjourney.preset',
+        'midjourney.channel',
         'midjourney.applications',
         'midjourney.imagineTasks'
       ]

src/store/midjourney/actions.ts

@@ -1,5 +1,6 @@
 import {
   IApplication,
+  IMidjourneyChannel,
   IMidjourneyImagineTask,
   IMidjourneyPreset,
   MIDJOURNEY_CHANNEL_FAST,
@@ -18,6 +19,10 @@ export const setPreset = ({ commit }: any, payload: IMidjourneyPreset) => {
   commit('setPreset', payload);
 };
 
+export const setChannel = ({ commit }: any, payload: IMidjourneyChannel) => {
+  commit('setChannel', payload);
+};
+
 export const setApplications = ({ commit }: any, payload: IApplication[]) => {
   commit('setApplications', payload);
 };
@@ -75,6 +80,7 @@ export const getImagineTasks = async (
 
 export default {
   setPreset,
+  setChannel,
   setApplications,
   getApplications,
   setImagineTasks,

src/store/midjourney/models.ts

@@ -1,4 +1,4 @@
-import { IApplication, IMidjourneyImagineTask, IMidjourneyPreset } from '@/operators';
+import { IApplication, IMidjourneyChannel, IMidjourneyImagineTask, IMidjourneyPreset } from '@/operators';
 import { Status } from '../common/models';
 
 export interface IMidjourneyState {
@@ -8,4 +8,5 @@ export interface IMidjourneyState {
   getImagineTasksStatus: Status | undefined;
   imagineTasksTotal: number | undefined;
   preset: IMidjourneyPreset;
+  channel: IMidjourneyChannel;
 }

src/store/midjourney/mutations.ts

@@ -1,15 +1,19 @@
-import { IApplication } from '@/operators';
+import { IApplication, IMidjourneyChannel, IMidjourneyPreset } from '@/operators';
 import { IMidjourneyState } from './models';
 import { Status } from '../common/models';
 
 export const setApplications = (state: IMidjourneyState, payload: IApplication[]): void => {
   state.applications = payload;
 };
 
-export const setPreset = (state: IMidjourneyState, payload: any): void => {
+export const setPreset = (state: IMidjourneyState, payload: IMidjourneyPreset): void => {
   state.preset = payload;
 };
 
+export const setChannel = (state: IMidjourneyState, payload: IMidjourneyChannel): void => {
+  state.channel = payload;
+};
+
 export const setGetApplicationsStatus = (state: IMidjourneyState, payload: Status): void => {
   state.getApplicationsStatus = payload;
 };
@@ -29,6 +33,7 @@ export const setImagineTasksTotal = (state: IMidjourneyState, payload: number):
 export default {
   setApplications,
   setPreset,
+  setChannel,
   setGetApplicationsStatus,
   setImagineTasks,
   setGetImagineTasksStatus,

src/store/midjourney/state.ts

@@ -1,3 +1,4 @@
+import { MIDJOURNEY_CHANNEL_FAST } from '@/operators';
 import { IMidjourneyState } from './models';
 
 export default (): IMidjourneyState => {
@@ -7,6 +8,7 @@ export default (): IMidjourneyState => {
     imagineTasks: undefined,
     getImagineTasksStatus: undefined,
     imagineTasksTotal: undefined,
-    preset: {}
+    preset: {},
+    channel: MIDJOURNEY_CHANNEL_FAST
   };
 };