在vue3中使用vuex,vue-router

 

一、使用vuex

1.yarn add vuex --save

2.新建store目录

 

3.index文件

//index.js
import {createStore} from 'vuex';
import getters from './gutters';

const modulesFiles  = require.context('./modules',true, /\.js$/);
const modules = modulesFiles.keys().reduce((modules,modulePath)=>{
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/,'$1');
    const value = modulesFiles(modulePath);
    modules[moduleName] = value.default;
    return modules;
},{})
export default createStore({
    getters,
    modules,
})

4.getters文件

 

 5.在main.js中 import store from './store' 

    createApp(App).use(store)

6.store文件

import * as service from 'services/enterprise'
import { Toast } from 'vant';
export default {
    namespaced: true,
    state: {
        detail:{}
    },
    mutations: {
        updateState: (state, obj) => {
            Object.keys(obj).map((item) => {
                state[item] = obj[item];
            })
        },
    },
    actions: {
        async add(context,{payload,callback}){
            const data = await service.fetchAdd(payload);
            if(data.data){
                Toast.success('提交成功');
                callback && callback()
            }else{
                Toast.fail('操作失败')
            }
        },
        async detail(context,{payload,callback}){
            const data = await service.getDetail(payload);
            context.commit("updateState",{
                detail:data.data
            })
        }
    }
}

7.在组件中使用

 

 8.使用mapMutations 和 mapActions导出

 二、使用vue-router

1. yarn add vue-router@4 --save

2.配置路由

import {
    createRouter,
    createWebHistory,
} from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'index',
        component: ()=> import ('./pages/index')
    },
    {
        path: '/cattle/myCenter',
        name: 'myCenter',
        component: ()=> import ('./pages/cattle/myCenter')
    },
    {
        path: '/cattle/enterpriseApply/:type/:id?',
        name: 'enterpriseApply',
        component: ()=> import ('./pages/cattle/enterpriseApply')
    },
    {
        path: '/cattle/enterpriseDetail/:id',
        name: 'enterpriseDetail',
        component: ()=> import ('./pages/cattle/enterpriseDetail')
    },
    //无法匹配到页面时 ，跳转到404  
    {
        path:'/404',
        name:'404',
        component: ()=> import ('./pages/404')
    },
    {
        path: '/:pathMatch(.*)',
        redirect: '/404'
    }
]
const router = createRouter({
    //history模式：createWebHistory , hash模式：createWebHashHistory
    history: createWebHistory(),
    routes
})

export default router

3.页面跳转

import { useRouter ,useRoute } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const {id} = route.params;
    const toDetail = () => {
      router.push(`/detail/${id}`);
    };
    return { toDetail };
  }
}