2019/6/27 实习笔记

Vue进阶：多语言、v-model与Vuex详解

最新推荐文章于 2024-04-25 09:16:58 发布

原创最新推荐文章于 2024-04-25 09:16:58 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨Vue.js框架中Vue-i18n插件的使用，实现应用的多语言支持；解析v-model修饰符如.trim的作用；并详细讲解Vuex的状态管理模式，包括创建、使用及组件间状态共享的方法。

项目里一堆我不知道的点

1、Vue-i18n是个啥：

一个让Vue支持多语言的插件。在组件中用$t('i18n.sceneName')表示。

声明方式：在main.js中声明

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'CN',
  messages: {
    'CN': require('@/assets/lang/cn')
  }
})

new Vue({
  i18n, //配到Vue里面
  router,
  store,
  render: h => h(App),
  created () {
    // 水印通用配置
    watermarkConfig(this)
  }
}).$mount('#app')

2、v-model.trim 是个啥？

v-model的修饰符。 .lazy 延迟加载 .number将输入的文本转成数字 .trim过滤首尾字符串

3、xhr请求中老是出现的this.$store是什么？

是使用了Vuex的原因。vue中不同组件之间的交互会很复杂，vuex的存在可以将数据存在一个store中，与这个store中关联的数据或者组件可以随着store中数据变化而变化。

3.1创建一个vuex对象

在src下新建一个store文件夹，文件夹内新建index.js用来创建vuex实例。在index.js中引入vue和vuex。new Vuex()创建一个全局变量，导出。在main.js中映入这个vuex对象。

import Vue from from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.store({
   state:{ //state就是托管的状态，就是数据
      count:1
   }
})

export default store

export以后再其他任意一个组件李可以先导入这个对象，然后就可以通过store.state.count来访问数据了，但是这样的话需要在每个要使用这个count的组件中都导入一次store，这种模式导致组件依赖全局状态单例，不好。
更好的做法是将状态从跟组件注入到所有子组件中。在main.js中

import store from './store/index'

new Vue({
  i18n,
  router,
  store, //将状态通过跟组件注入到所有组件中
  render: h => h(App),
}).$mount('#app')

所以！这个时候就可以用this.$store.state.count来访问count了，所以$就是从跟组件导入的模块啊，比如this.$router

3.2如何使用这个store，即vuex对象呢

vuex对象中保存的数据我们可以通过this.$store.variable在组件中使用。vuex三个重要的对象 state，mutation，actions。

通过this.$store.state.count可以获取

//1、直接拿，但是这样。。貌似不太好，直接暴露值了
computed:{
   getCount(){
      return this.$store.state.count
   }
}

//2、搞个getters，相当于Java里的getter，封装原来的数据
new Vuex.store({
   state:{
      count:1
   },
   getters:{
      getCount:state=>{
        return state.count
      }
   }
})

//组件里使用
computed:{
   number(){
      return this.$store.getters.getCount
   }
}

4、什么叫响应式 Reactive？ Vuex就是响应式的，不是很懂