组件路由vuex axios 使用相关基础

最新推荐文章于 2023-07-24 19:07:26 发布

原创最新推荐文章于 2023-07-24 19:07:26 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这篇博客详细介绍了Vue.js应用中如何集成Vuex状态管理、Vue Router路由配置、Axios进行API请求以及模块化的实现。首先，讲解了Vuex的安装、注册、实例化、暴露以及使用方法，包括state、mutations、actions和getters的映射。接着，阐述了Vue Router的创建和配置，以及axios的基础用法和创建axios实例。进一步，展示了如何创建Vuex模块，以及如何在组件中通过映射方法使用actions、getters。最后，提到了在实际项目中的高级使用方式，如actions和getters中如何访问和操作不同模块的状态和方法。

基础

1：下载  npm i vuex
2: 导入
//在对应创建的指定js中导入
   src/store/index.js
   import Vuex from 'vuex'
3:注册
   import Vue from 'vue'
   Vue.use(Vuex)
4:实例化
   const store =new Vuex.Store({
       state:{
           // 共享的数据仓库
       },
       mutations:{
           // 唯一修改state 
       }，
       actions:{
           
       },
       getters:{
           
       }
   })
5:暴露出去  export default store
6:挂载
   main.js
    import store from '@/store'
    new Vue({
        store
    })

使用

定义：state:{
    xxx:'张三'
}
使用：this.$store.state.xxx

mapState使用  映射方法
  1：导入  import {mapState} from 'vuex'
  2: 定义：
    computed:{
        ...mapState(['state的属性（xxx）'],{新的名字:'state的属性名'})
    }
  3:使用：
      {{xxx,新的名字}}

定义
mutations:{
    方法名(state,value){
        state.属性名=value
    }
}
普通方法使用：this.$store.commit('方法名',实参值)

mapMutations
1：导入  import {mapMutations} from 'vuex'
2:定义
  methods:{
      ...mapMutations(['方法名'])
  }
3:使用 this.方法名（实参值）

getters:{
    方法名(state,getters,rootState,rootGetters){
        return 新的值
    }
}
使用：this.$store.getters.方法名

mapGetters
1：导入  mport {mapGetters} from 'vuex'
2:定义
   computed:{
       ...mapGetters(['方法名'])
   }
  使用：this.方法名

vuex的actions

actions:{
    方法名（store,value）{
     store:{
            state:当前模块的state,
            getters:当前模块的getters
            rootState:根模块的state
            rootGetters:根模块下的getters
            commit:调用mutations的方法
                   调用当前模块的mutations :store.commit('mutations方法名',实参值)
            dispatch:调用actions的方法
                   调用当前模块的actions：store.dispatch('actions方法名',实参值)
     }   
    }
}
mapActions
1：导入  import {mapActions} from 'vuex'
2: 定义
       methods:{
           ...mapActions(['方法名'])
       }
       
 3:使用：
   this.方法名（实参值）

1.书写指定路由

// 1.下包
import Vue from 'vue'
// 2.导包
import VueRouter from 'vue-router'
// 3.注册
Vue.use(VueRouter)

// 4.创建对应路由
const routes = [
  {
    path: '/',
//这个是异步路由懒加载.可以在项目上线之前修改成这样.
//作用是第一次打开页面得时候加载对应得需求.节约请求资源.懒加载
    component: () => import('../views/Login/index.vue')
  },
]
// 5.实例化
const router = new VueRouter({
  routes
})

// 6.暴露
export default router

2.main.js中导入

import router from './router'

//然后在
new Vue({
    router
})

3.创建对应的axios请求地址

// 导入 axios
import axios from 'axios'

import router from '../router/index'
// 全局挂载axios
axios.defaults.baseURL = 'http://www.liulongbin.top:3008'

// 导出axios
export default axios

-----------------------------------------------------------

4.使用axios

import request from './request'

export const cateFrom = () => {
  return request({
    method: 'get',
    url: '/my/cate/list'
  })
}

5.创建vuex

import { cateFrom } from '../api/art'
export default {
  namespaced: true,
  state: {
    art: []
  },
  mutations: {
    serArtList (state, artList) {
      state.art = artList
    }
  },
  actions: {
    async AgetArtList (context) {
      const res = await cateFrom()
      console.log(res)
      context.commit('serArtList', res.data.data)
    }
  }
}

6.创建modules

import Vue from 'vue'
import Vuex from 'vuex'

-------------
import user from './user'
import art from './article'
import list from './artlist'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  getters: {
  },
  actions: {
  },
  modules: { user, art, list }
})

7.通过映射在对应的位置使用对应的函数

import { mapActions, mapGetters } from 'vuex'

 methods: {
    ...mapActions('user', ['AgetUserFrom']),
}
  computed: {
    ...mapGetters('user', ['userName', 'userImg'])
  }

8.在初始化页面中使用

  created () {
    this.AgetUserFrom()
  },

高级使用方式,

//当没有实参得时候一定要书写规范.添加一个null在里面.

user:{
    actions:{
        refreshUser(store){
            store:{
                state:当前模块的state数据,
                rootState:根模块下的state数据  
                      rootState.模块名.属性名
                commit:调用mutations方法
                      调用本模块的mutations方法： commit('本模块的mutations方法名'，实参值)
                      调用其它模块的mutations方法：commit('模块名/方法名',实参值（没有用null点位）,{root:true})
                dispatch:调用actions方法
                     调用本模块actions方法：dispatch('本模块的actions方法',实参)
                     调用其它模块的actions方法:dispatch('模块名/方法名'，实参（没有用null占位）,{root:true})
                getters:调用getters方法
                       getters.本模块的getters方法名
                rootGetters:调用根模块下的getters方法
                      调用其它模块的getters:rootGetters['模块名/其它模块getters方法']
            }
        }
    }，
    getters:{
        方法名(state,getters,rootState,rootGetters){
                state:当前模块的state数据,
                rootState:根模块下的state数据  
                      rootState.模块名.属性名
                getters:调用getters方法
                       getters.本模块的getters方法名
                rootGetters:调用根模块下的getters方法
                      调用其它模块的getters:rootGetters['模块名/其它模块getters方法']  
        }
    }
},
home