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失常应用