Vue全家桶(vue2和vue3)

1. vue的router使用

1.1vue2下的router使用

//首先引入库 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); //将各个路由页面组装到数组routes里面 const routes = []; //创建一个路由实例对象 const router = new VueRouter({ routes }) //导出这个路由 export default router

然后在main.js 导入

import router from './router'; //在挂在vue上即可 new Vue({ router, store, render: h => h(App) }).$mount('#app')

1.2 vue3的路由使用

//导入创建相关路由的函数 import { createRouter, createWebHashHistory } from 'vue-router'; //将各个路由页面组装到数组routes里面 const routers = []; //然后用createRouter这个函数去创建路由 const router = createRouter({ //用createWebHashHistory 这个函数去指定路由模式 history: createWebHashHistory(), routes: routers }) export default router;

然后在main.js中导入使用

import router from './router'; createApp(App).use(router).mount('#app')

Vue vuex知识点

vue2中使用vuex

//1. 引入vuex插件并使用 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, }) // 2. 在main.js引入 store import store from './store'; new Vue({ store, render: h => h(App) }).$mount('#app')

注意点是state只能通过mutations去变更，然后定义在mutations里面的函数使用commit去承若，在actions里面的函数是通过dispatch来派发

vue3 vuex的使用

import { createStore } from 'vuex' const state = { count: 0 } const mutations = { increment(state) { state.count++ } } const actions = { } export default createStore({ state, getters, actions, mutations })

在main.js中

... import store from './store'; const admin = const admin = createApp(Admin); admin.use(store);

具体页面使用

... import { reactive, computed } from 'vue'; import { useStore } from 'vuex'; export default { setup() { const store = useStore(); const addCount = () => { store.commit('increment') }; return reactive({ count: computed(() => store.state.count), addCount }) } }