vue3.0 集成vue-router、vuex

搭建vue3.0脚手架插件分布情况（最新版）

  输入npm info xxxx(插件名称) versions可查看当前插件所有版本

1. “vue”: “^3.0.0”;
2. “vue-cli”:"^4.5.9";
3. “vue-router”: “^4.0.0-rc.5”;
4. “axios”: “^0.21.0”;
5. “vuex”: “^4.0.0-rc.2”;

第一步、安装对应的插件

cnpm i xxx(插件名称)@xxx(版本号) --save

第二步、插件集成到vue-cli脚手架中

1. 初始化vue-router

1.在src文件夹下创建一个router文件夹及index.js文件。

import {
	createRouter,
	createWebHistory,//history模式
	createWebHashHistory//hash模式
} from 'vue-router'

const router = new createRouter({
	history:createWebHashHistory(),
	routes:[
		{
			path:'/',
			redirect:'/home'
		},
		{
			path:'/home',
			component:() => import('@/components/home.vue')
		},		
	]
})

/**
 * 权限控制，动态路由添加等
 */
router.beforeEach((to,from,next) => {
	console.log(to,from,111);
	next();
})

export default router;

2.在入口文件main.js中引入router

import { createApp } from 'vue'
import App from '@/App.vue'
import Router from '@/router'

createApp(App)
	.use(Router)
	.mount('#app')

3.完成vue-router引入

2.初始化vuex

1.在src文件夹下创建一个store文件夹及index.js文件。

import Vuex from 'vuex'

/**
 * 批量引入modules中js文件
 */
let modulesFiles = require.context('./modules', true, /\.js$/);
let modules = modulesFiles.keys().reduce((modules = {},modulePath) => {
	let moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
	modules[moduleName] = modulesFiles(modulePath).default;
	return modules
},{});

const store = Vuex.createStore({
	state:{
		
	},
	getters:{
		
	},
	mutations:{
		
	},
	actions:{
		
	},
	modules
})

export default store

2.这里新建modules文件，便于模块分类及维护管理

3.简单介绍vuex调用

方法一：

import { getCurrentInstance } from 'vue';

getCurrentInstance十分重要，是获取当前组件的实例。

setup(){
		const { ctx } = getCurrentInstance();//ctx相当于vue2.x中this
		const userInfo = ctx.$store.state.user.userInfo;//获取state属性值
		ctx.$store.dispatch('user/getUserInfo','getUserInfo1');//调用actions方法
		ctx.$store.commit('user/getUserInfo','getUserInfo2');//调用mutations方法
		return {
			userInfo
		}
	},

方法二：

import { useStore } from 'vuex'

setup(){
		const store = useStore();
		const userInfo = store.state.user.userInfo;//获取state属性值
		store.dispatch('user/getUserInfo','getUserInfo1');//调用actions方法
		store.commit('user/getUserInfo','getUserInfo2');//调用mutations方法
		return {
			userInfo
		}
	},

4.vuex引入结束