Vue3 + VITE project construction – VuEX introduction

1. Preview the document to understand the differences between Vex4.0 and Vex3.0
2. Install dependencies

"dependencies": {
    "vuex": "^ 4.0.2." "."vuex-persistedstate": "^ 4.0.0"
  },
Copy the code

4. Create a store folder under the SRC path
5. To switch languages with vuex, click the button to increase the value by 1. Note how to obtain store value in setup, vuex module value, registration, and persistence with the plug-in

// store/store.d.ts
declare namespace MyStore {
  type language = 'zh-cn' | 'en'
  interface SettingState {
    language: language
  }
  interface State {
    count: number
  }
}

Copy the code

// store/index.ts
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import mutations from './mutations'
import SettingModule from './modules/setting'

export const key: InjectionKey<Store<MyStore.State>> = Symbol(' ')

export const store = createStore<MyStore.State>({
  state: {
    count: 0
  },
  mutations,
  modules: {
    setting: SettingModule
  },
  plugins: [
    createPersistedState({
      key: 'my-first-vite'.paths: ['setting.language'].storage: {
        getItem: (key: string) = > localStorage.getItem(key),
        setItem: (key: string, value: any) = > localStorage.setItem(key, value),
        removeItem: (key: string) = > localStorage.removeItem(key)
      }
    })
  ]
})

// define your own `useStore` composition function
export function useStore () {
  return baseUseStore(key)
}

Copy the code

// store/mutations.ts
export default {
  setCount: (state: MyStore.State, count: number) = > {
    state.count = count
  }
}

Copy the code

// store/modules/setting.ts
export default {
  namespaced: true,
  state () {
    const state: MyStore.SettingState = {
      language: 'zh-cn'
    }
    return state
  },
  getters: {
    language: (state: MyStore.SettingState) = > state.language
  },
  mutations: {
    / * * * *@param state
     * @param language* /
    setLanguage: (state: MyStore.SettingState, language: MyStore.language) = > {
      state.language = language
    }
  }
}

Copy the code

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/packages/theme-chalk/src/base.scss'
import i18n from '@/vab/i18n'
import '@/vab/elementPlus.scss'
import { store, key } from './store'

const app = createApp(App)
app.use(i18n)
app.use(store, key)
app.mount('#app')

Copy the code

// App.vue
<template>
  <el-config-provider :locale="localLanguage">
    <hello-world />
  </el-config-provider>
</template>
<script lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
import { computed, defineComponent } from 'vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en'
import { useStore } from '@/store'
export default defineComponent({
  components: {
    HelloWorld
  },
  setup () {
    const store = useStore()
    const localLanguage = computed(() = > {
      switch (store.getters['setting/language']) {
        case 'en':
          return en
        case 'zh-cn':
          return zhCn
      }
    })
    return {
      localLanguage
    }
  }
})
</script>

Copy the code

// HelloWord.vue
<template>
  <el-button @click="count++">
    count: {{ count }}
  </el-button>
  <el-button>{{ $t('message.hello') }}</el-button>
  <el-date-picker
    v-model="value1"
    type="date"
    placeholder="Select date"
  >
  </el-date-picker>
  <el-dropdown @command="changeLanguage">
    <el-button type="primary">To switch between languages<i class="el-icon-arrow-down el-icon--right" />
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh-cn">Chinese</el-dropdown-item>
        <el-dropdown-item command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from '@/store'
import { mapMutations } from 'vuex'

export default defineComponent({
  setup () {
    const store = useStore()
    const count = computed({
      get: () = > store.state.count,
      set: (val: number) = > store.commit('setCount', val)
    })
    return {
      value1: ' ',
      count
    }
  },
  methods: {
    ...mapMutations('setting'['setLanguage']),
    /** * Switch language *@param type* /
    changeLanguage (type: MyStore.language): void {
      this.setLanguage(type)
      this.$i18n.locale = type
    }
  }
})
</script>

Copy the code