vue3 + vite 项目搭建 - 引入vuex

1. 预览文档，了解vuex4.0与vuex3.0的差异
2. 安装依赖

"dependencies": {
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.0.0"
  },

4. 在src路径下创建store文件夹，目录结构如图
5. 用vuex实现切换语言，点击按钮增1，注意setup中怎么获取store值，vuex模块取值、注册，以及借助插件实现持久化

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

// 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)
}

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

// 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
    }
  }
}

// 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')

// 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>

// 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="选择日期"
  >
  </el-date-picker>
  <el-dropdown @command="changeLanguage">
    <el-button type="primary">
      切换语言<i class="el-icon-arrow-down el-icon--right" />
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh-cn">
          中文
        </el-dropdown-item>
        <el-dropdown-item command="en">
          英文
        </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']),
    /**
     * 切换语言
     * @param type
     */
    changeLanguage (type: MyStore.language): void {
      this.setLanguage(type)
      this.$i18n.locale = type
    }
  }
})
</script>