This is the 9th day of my participation in Gwen Challenge

To this, several core main functions have, began to develop around the periphery of the function.

Top of the list: “Settings features.” To complete the configuration function, the core is the “cache” of configuration data. Only when the data is cached, the configuration is valuable. As a client, the data is stored locally, so it is natural.

Previously developed functions have their own configuration, I unified on a page, the specific display as follows (please ignore the interface, it is really ugly!) :

Here is an example of how to use Vuex to develop Settings.

Vuex Store class

In fact, many places, including the Vue website, provide guidance on the development of Vuex

Core concepts include: State, Getters, Mutations, Actions and so on. Creating code is no different from what the website says:

export const store = createStore<State>({ state: { showFestivals: false, showWeather: false, location: { longitude: 134.52, latitude: 38.02,}, focusTime: 40,}, mutations: {changeShowFestivals(state) {state.showFestivals =! state.showFestivals; }, changeShowWeather(state) { state.showWeather = ! state.showWeather; }, changeLocation(state, location) { state.location = { longitude: location.longitude, latitude: location.latitude, }; }, changeFocusTime(state, focusTime) { state.focusTime = focusTime; }, }, actions: { changeShowFestivals({ commit }) { commit('changeShowFestivals'); }, changeShowWeather({ commit }) { commit('changeShowWeather'); }, changeLocation({ commit }) { commit('changeLocation'); }, }, plugins: [dataState], });Copy the code

Here State mainly includes:

Export interface State {showFestivals: Boolean, showWeather: Boolean, location: {longitude: number, // latitude: Number, // latitude}, focusTime: number, // focusTime}Copy the code

As one of the core concerns is how to store the status data locally, a third party plug-in, vuex-PersistedState, is used

Persist and rehydrate your Vuex state between page reloads.

const dataState = createPersistedState({
  paths: ['data'],
});
Copy the code

See the Github codebase for the complete code

Now that we have the Store function, we’re ready to use it.

Added time picker

Add a time picker to the focus mode setting above in the Electron+Vue3 MAC Calendar development Record (8) :

<div class="p-p-4" style="text-align:center;" > <Knob v-model="focus_time" :step="5" :min="5" :max="120" /> <Button type="button" :label="focusLabel" icon="pi pi-play" class="p-d-block p-mx-auto p-button-success" @click="focus" /> </div>Copy the code

Here, the time is between 5-120. Focus_time is what we need to cache so that we don’t need to adjust the focus time when using it next time.

Using the Store:

// SettingSub.vue
import { useStore } from '/@/store';

setup() {
const store = useStore();
return {
  store,
};
},

mounted() {
    this.focus_time = this.store.state.focusTime;
},
Copy the code

FocusTime is obtained directly through state.

With the new value selected, press Button for click:

  <Button
    type="button"
    :label="focusLabel"
    icon="pi pi-play"
    class="p-d-block p-mx-auto p-button-success"
    @click="focus"
  />
  
focus(): void {
  this.store.commit('changeFocusTime', this.focus_time);
  this.$emit('focusClick');
  this.$emit('update:visibleFullSetting', this.sidebarVisible = false);
  window.electron.ipcRenderer.send('show-focus-window');
},
Copy the code

Implement the changeFocusTime method on this.store.com MIT.

At this point, the data is cached and the “Focus” interface is started. Based on the development record (8) of Electron+Vue3 Calendar for MAC version above — Focus mode, we give focus_time to deadline.

provide() {
return {
  deadline: computed(() => Moment().add(this.store.state.focusTime, 'minute').format()),
};
},
Copy the code

Vue Inject Vue Inject Vue Inject Vue Inject

As for the use of Provide/Inject, it will be introduced in the following theory.

summary

I read a lot of official documentation and tutorials to combine Vuex with Provide/Inject. It can be written as a new record (in which other Settings are not recorded again).

In the next step, we will improve the existing functions and develop new functions: “events and tasks” function, for example, to record the birthdays of relatives and friends and remind them of friendship when the time comes.

To be continued!

All the records of this project are basically in the column, welcome to check out: Electron+Vue3 MAC Calendar Development records