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正常使用

Vue3-在Setup中使用axios请求获取的值，并赋值给模板

setup () {
  const verify = reactive({
    currentPage: 1,
    pageSize: 10,
    platName: ''
  })
  const data = reactive({
    tableData: []
  })
  getClient(verify).then((res) => {
    console.log(res)
    if (res.data.code === 200) {
      console.log(23423)
      data.tableData = res.data.data.contents
    }
  })
   直接定义tableData，赋值到模板上 不生效
  return { verify, ...toRefs(data) }
},

this.$message改为下面写法

ElMessageBox.confirm('是否删除所选择的数据?', '提示', {
  confirmButtonText: '是',
  cancelButtonText: '否',
  type: 'warning',
  closeOnClickModal: false
}).then(() => {
  deleteClient([did]).then(req => {
    if (req.data.code === 200) {
      ElMessage.success('操作成功！')
    } else {
      ElMessage.error(req.data.msg)
    }
  }).catch(req => {
    ElMessage.error('服务器错误！')
  })
}).catch(() => {
  ElMessage.info('已取消删除')
})

Vue3使用router路由跳转在vue2中我们只需要引入main.js即可获取this实例，直接

this.$router.push('/login')

首先在vue3中我们使用组合API，在setup中可以使用useRouter、userRoute

import { useRouter } from 'vue-router'
setup(){
    const router = useRouter()
    router.push({path:'/xxxview',query:{...}});
}

但是在自己封装的js里面，我们不能使用useRouter ,useRoute，他们需要在setup中调用执行后才能用，于是给出解决办法：直接使用router实例：router文件下的index.js文件就是我们的路由实例。

import router from '../../router'
router.push('/login')