关于前端:Vue3和Vue2的不同及替代方案

setup 中不能用 this

this.$message 须要用 import {ElMessage} from ‘element-plus’

ElMessage.success({message: '保留胜利'})

//Vue2 旧用法
this.$message({
    type: success,
    message: '保留胜利'
})

refs 的值要用 value 获取

<el-form
    ref="newCreatForm"
    :model="newCreat"
>

办法中援用时 要用 newCreatForm.value 能力获取实例, newCreatForm 由装璜器 setup 返回 const newCreatForm = ref()

setup 中如何应用 vuex

应用 useStore

import {useStore} from "vuex";

export default {
  name: "About",
  components: {},
  setup() {const store = useStore()
    function plus() {
      //store.state.count++
      store.commit('increment')
    }
    return {plus}
  }

setup 中应用 computed

import {computed} from "vue";
export default {
  name: "About",
  components: {},
  setup() {const store = useStore()
    function plus() {store.commit('increment')
    }
    // 新用法
    const count = computed(() => {return store.state.count})
    return {plus, count}
  },
  // Vue2 传统用法
  computed: {// count () {
      // return this.$store.state.count
    // }
  },
  methods: {// plus() {
    //   this.$store.state.count++;
    // }
  },
};

setup 中 mapMutation 如何应用模块中的 mutation 办法?

const change = mapMutations('user',{change: "changeName"}) // user 命名空间 change 别名, changeName 命名空间中的实在函数名称
return {...change};

Vue2 中传统用法

methods: {
...mapMutations({change: 'user/changeName'})
}

setup 中应用 mapActions

const plus = mapActions({plus: 'increment'});
return {..plus};
// 返回的就是页面所须要的函数, 能够间接用 如果不同名 必须用对象赋值别名! 即页面中用的是 plus, 而 store 中是 increment 的状况. 如果同名能够用数组 ['plus']

测试在 vue3 中 mapState 跟 mapGetters 在 setup 函数返回的对象构造进去的 state 跟 getters 是函数，这个函数应该放在 computed 函数中，其返回值才是咱们真正想获取到的响应式的值。特地留神的是这个函数咱们在当作参数传递给 computed 时，咱们要显示的为这个函数绑定 this 为 {$store:store}；mapMutations 跟 mapActions 在 setup 间接返回能够在 template 失常应用