关于vux 进阶模块拆分详解

关于vux 进阶模块拆分详解

如果我们是使用脚手架搭建地vue项目，默认目录下都有一个store文件夹，下面只有一个index.js,如果是小项目，我们不需要拆分模块，直接在里面写就完事

2。

如果是稍微大一点地项目，我们帮vux按模块拆分开来，便于后期维护

直接上代码，简洁明了。

在store下面建立modules文件夹，

modules文件夹下面放的就是你需要拆分出来的模块，这里我例举一个user模块，用户登录的模块，根据自己的业务建立需要的js

在store下面建立getters.js
首先看一下目录结构

首先我们来看index.js的代码,我们只已user用户模块来作为例子，那么我们只需要导入user就行， getters 也需要引入

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import user from './modules/user'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store

getters.js 代码如下

const getters = {
    img:state=>state.user.img，
    token:state=>state.user.token，
}
export default getters

最后来看一下user.js文件

user.js文件如下

import { loginByUsername } from '@/api/login'

const user = {
  state: {
    token: "",
    img:"https://scpic.chinaz.net/files/pic/pic9/201709/zzpic6330.jpg"
  },

  mutations: {
  
    SET_TOKEN: (state, token) => {
      state.token = token
    },
   
  },

  actions: {
    // 用户名登录
    LoginByUsername({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        loginByUsername(userInfo.username, userInfo.password).then(response => {
            const data = response.data
            commit('SET_TOKEN', data.token)
            resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

  
  }
}

export default user

假如我们在登陆页面 登录，然会帮token 存起来

login.vue 你自己的登录页面

methods:{
	    let parms={
	        username:"admin",
	        password:"123456"
	      }
          this.$store.dispatch('LoginByUsername', parms).then(() => {
       
          }).catch(() => {
         
          })

}

这样我们就调用了user.js模块中的 actions 下的LoginByUsername 方法，然后通过commit('SET_TOKEN', data.token) 提交到上面的 mutations 下的SET_TOKEN 从而就修改了对用的token值

可能上面这一段有的人不知道啥意思，其实就是帮请求抽离出去

 return new Promise((resolve, reject) => {
        loginByUsername(userInfo.username, userInfo.password).then(response => {
            const data = response.data
            commit('SET_TOKEN', data.token)
            resolve()
        }).catch(error => {
          reject(error)
        })
      })

主要看 loginByUsername 其实这里是从上面引入进来的 import { loginByUsername } from '@/api/login'

这里需要哪个方法就帮谁结构出来，比如还有一个XXXfn方法，就这样写

import { loginByUsername，XXXfn } from '@/api/login'

那我们再来看看 api/login.js文件

import request from '@/utils/request'
//登录方法
export function loginByUsername(username, password) {
    const data = {
        username,
        password
    }
    return request({
        url: '/login/login',
        method: 'post',
        data
    })
}

//如果需要其他方法按照格式写完事
/*export function XXXfn(token) {
    return request({
        url: '/user/info',
        method: 'get',
        params: { token }
    })
}/*

在看看上面又引入了一个 request.js

至于request.js 就是我们对axiso的封装，网上代码一大片

import axios from 'axios'
import store from '@/store'

const service = axios.create({
  baseURL: "", 
  timeout: 5000
})

// 拦截前
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      config.headers['X-Token'] = ""  //可以结合缓存来用
    }
    return config
  },
  error => {
    console.log(error) 
    Promise.reject(error)
  }
)
//拦截后
service.interceptors.response.use( response => response,
  response => {
    const res = response.data
    if (res.code== 200) { //这里根据后台指定的状态来做对应的处理 
      return response.data
    }
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

最后我们来说一下怎么使用store里面的数据，
在任意组件中 已index.vue为例

<template>
  <div >
     {{token}}
     <img :src="img" alt="">
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: '',
  data() {
    return {
       
    }
  },
  computed: {
    ...mapGetters([
      "token",
      "img"
    ])
  },
  created() {
 
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

}
</style>

import { mapGetters } from 'vuex' 不懂的可以自己去看看，

注意我们这里使用辅助函数，当然你也可以用this.$store.state.user.token 来取值
显示如下