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
        })
    }
}

今天的文章Vue全家桶(vue2和vue3)分享到此就结束了，感谢您的阅读。