[JavaScript知识库]vue2 与 vue3 区别

main.js 是公用的??

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
// import VueAxios from 'vue-axios'
import VueLazyLoad from 'vue3-lazyload'
import VueCookies from 'vue3-cookies'
import Vuex from 'vuex'
import { ElMessage, ElMessageBox, ElPagination } from 'element-plus'
import 'element-plus/packages/theme-chalk/src/base.scss'
// import env from './env'


axios.defaults.baseURL = '/api'

axios.defaults.timeout = 8000

axios.interceptors.response.use((response) => {
  const res = response.data
  const path = location.hash
  if (res.status === 0) {
    return res.data
  } else if (res.status === 10) {
    if (path !== '#/index') {
      window.location.href = '/#/login'
    }
    return Promise.reject(res)
  } else {
    ElMessage.warning(res.msg)
    return Promise.reject(res)
  }
}, (error) => {
  const res = error.response
  ElMessage.error(res.data.message)
  return Promise.reject(error)
})
// Vue.config.productionTip = false
axios.defaults.withCredentials = true
const app = createApp(App)
app.config.globalProperties.axios = axios

app.use(store)
app.use(router)
app.use(VueCookies)
app.use(Vuex)
app.use(VueLazyLoad, {
  loading: '/imgs/loading-svg/loading-bars.svg'
})

app.use(ElMessage)
app.use(ElMessageBox)
app.use(ElPagination)

app.mount('#app')

vue2的调用? ?

import NavFooter from '../components/NavFooter.vue'
export default {
  name: 'login',
  components: {
    NavFooter
  },
  data () {
    return {
      username: '',
      password: '',
      userId: ''
    }
  },
  methods: {
    login () {
      const { username, password } = this
      if (!username || !password) {
        this.$message.error('请输入正确的用户名和密码')
        return
      }
      this.axios.post('/user/login', {
        username,
        password
      }).then((res) => {
        this.$cookies.set('userId', res.id, 'Session')
        this.$store.dispatch('saveUserName', res.username)
        this.$router.push({
          name: 'index',
          params: {
            from: 'login'
          }
        })
    },
    // ...mapActions(['saveUserName']),  es6
    register () {
      const { username, password } = this
      this.axios.post('/user/register', {
        username,
        password,
        email: 'xiaoxiao@163.com'
      }).then(() => {
        this.$message.success('注册成功')
      })
     
    }
  }
}
</script>

vue3 的调用? getCurrentInstance 返回所有的全局变量，故可以ctx.$router 等，单独引用的话看第二张图

import { getCurrentInstance, ref } from "vue";
import cookie from "vue-cookie";
export default {
  name: "login",
  props: {
    uname: {
      type: String,
      default: "Jack",
    },
  },
  setup() {
    const { ctx } = getCurrentInstance();
    let username = ref("");
    let password = ref("");
    let userId = ref("");
    let store = ctx.$store;
    let router = ctx.$router;
    const login = () => {
      if (!username.value || !password.value) {
        ctx.$message.error("请输入正确的用户名和密码");
        return;
      }
      ctx.axios
        .post("/user/login", {
          username: username.value,
          password: password.value,
        })
        .then((res) => {
          cookie.set("userId", res.id, { expires: "Session" });
          store.commit("saveUserName", res.username);
          router.push({
            name: "index",
            params: {
              from: "login",
            },
          });
        });
    };
    const register = () => {
      ctx.$message.success("xxx");
      return;
    };
    return {
      username,
      password,
      userId,
      login,
      register,
    };
  },
};
</script>

import { computed } from 'vue'
import { useStore } from 'vuex'


export default {
  setup () {
    const store = useStore()
const router = useRouter()
const route = useRoute()
const pus =  function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }

    return {
      // 在 computed 函数中访问 state
      count: computed(() => store.state.count),

      // 在 computed 函数中访问 getter
      double: computed(() => store.getters.double),
pus 
    }
  }
}