04使用Pinia实现Vuex项目全球化

在上一章中使用的Vuex作为状态管理实现的全球化，这篇文章使用Pinia作为状态管理。

现有用户可能对 Vuex 更熟悉，它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好，因此 Vuex 现在处于维护模式。它仍然可以工作，但不再接受新的功能。对于新的应用，建议使用 Pinia。

安装pinia

npm install pinia

在main.ts中添加以下代码：

import { createPinia } from 'pinia'

app.use(createPinia())

实现本地化状态管理

添加以下文件stores\ApplicationConfiguration.ts，添加以下代码：

import { AbpClient, ApplicationConfigurationDto } from '@/api-client/client'
import { IConfig } from '@/api-client/clientBase'
import { defineStore } from 'pinia'

/**
 * 定义状态管理
 * 状态管理id为applicationConfiguration
 */
export const useApplicationConfigurationStore = defineStore('applicationConfiguration', {
  state: () => {
    return {
      applicationConfiguration: {} as ApplicationConfigurationDto
    }
  },
  getters: {
    auth: (state) => state.applicationConfiguration.auth,
    currentTenant: (state) => state.applicationConfiguration.currentTenant,
    currentUser: (state) => state.applicationConfiguration.currentUser,
    localization: (state) => state.applicationConfiguration.localization,
    // 获取本地语言
    l: (state) => (key: string) => {
      const localization = state.applicationConfiguration.localization

      if (localization?.values && localization?.defaultResourceName) {
        return localization?.values[localization?.defaultResourceName][key]
      }

      return key
    }
  },
  actions: {
    /**
     * 初始化应用程序配置
     */
    initApplicationConfiguration (): Promise<ApplicationConfigurationDto> {
      if (this.applicationConfiguration.timing) {
        return Promise.resolve(this.applicationConfiguration)
      }

      const client = new AbpClient(new IConfig())

      return client.applicationConfiguration()
        .then(result => {
          this.applicationConfiguration = result

          return Promise.resolve(this.applicationConfiguration)
        })
    },
    /**
     * 重置应用程序配置
     */
    resetApplicationConfiguration () : Promise<ApplicationConfigurationDto> {
      this.applicationConfiguration.timing = undefined
      return this.initApplicationConfiguration()
    }
  }
})

从以上代码可以看出pinia比vuex更简洁方便，且pinia是完全支持ts的

在App.vue中初始化应用程序配置

在App.vue文件中添加以下代码

import { useApplicationConfigurationStore } from '@/stores/ApplicationConfiguration'  // 导入应用程序配置状态管理

  mounted () {
    // const myStore = useStore()
    // myStore.dispatch('ConfigurationModule/initApplicationConfiguration')
    const store = useApplicationConfigurationStore()
    store.initApplicationConfiguration()
  }

在AboutView.vue中使用本地化

在AboutView.vue中添加以下代码

import { useApplicationConfigurationStore } from '@/stores/ApplicationConfiguration'  // 导入应用程序配置状态管理

添加函数计算属性

  computed: {
    // ...mapGetters({
    //   l: 'ConfigurationModule/l'
    // })
    l () {
      return (key: string) => {
        const store = useApplicationConfigurationStore()
        return store.l(key)
      }
    }
  }

    <div>
      {{ l('LongWelcomeMessage') }}
    </div>

修改LanguageSelect.vue以实现语言切换

在LanguageSelect.vue文件中添加以下代码

import { useApplicationConfigurationStore } from '@/stores/ApplicationConfiguration'  // 导入应用程序配置状态管理

用以下代码替代原有对应代码

  data () {
    return {
      data: this.value
    }
  },
  emits: ['onchange'],
  computed: {
    store () {
      return useApplicationConfigurationStore()
    },
    currentCulture () {
      return this.store.localization?.currentCulture
    },
    options () {
      return this.store.localization?.languages || new Array<LanguageInfo>()
    },
    isSelected () {
      return (item: LanguageInfo) => {
        return item.cultureName === this.currentCulture?.cultureName
      }
    }
  },
  methods: {
    change (event: any) {
      this.data = event.target.value
      this.$cookies.set(IConfig.acceptLanguageKey, this.data)
      this.store.resetApplicationConfiguration()
      this.$emit('onchange', this.data)
    }
  }

如此就完成了使用Pinia替代vuex实现Vue项目全球化

Pinia比vuex对ts的支持更好，而且代码清晰简洁，调用也更方便。