关于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 来取值
显示如下
