vuex模块化。vuex发请求（发请求全部写在一起，需要时调用。补充：调用vuex里state定义的值的第二种方法）
vuex的模块化
- state: 存储共享的数据
- mutation: 同步修改state的值
- action: 异步提交mutation
- module: 模块
在store文件夹下创建一个文件夹，在创建一个js文件
然后把这个文件引入到index.js文件夹里面，然后在modules里面注册
然后在这个先建的js文件里面写请求，注意这里发请求跳转路由用router.push( )
(也可以用.then().catch()的方式发请求
import api from ‘…/…/http/api’
import router from ‘…/…/router’
import {Message} from ‘element-ui’
export default {
// 开启命名空间 这个文件就是单独的一个vuex的模块
namespaced: true,
state: {
menus: []
},
mutations: {
setMenus(state, data) {
state.menus = data
}
},
actions: {
// 所有的请求都写在actions里面
// action里面的方法可以传两个参数 第一个参数是整个store(vuex对象) 第二个参数是请求的参数
async getMenus({commit}) {
let res = await api.getMenus()
if (res.meta.status === 200) {
// 提交mutation
commit(‘setMenus’, res.data)
}
},
async login({commit}, {username, password}) {
let res = await api.login({
username,
password
})
if (res.meta.status === 200) {
// 存储信息
localStorage.setItem(‘adminToken’, res.data.token)
localStorage.setItem(‘adminUser’, JSON.stringify(res.data))
// 跳转路由
router.push(’/menus’)
// 提示用户
Message.success(‘登录成功’)
} else {
Message.error(res.meta.msg)
}
}
// getMenus() {
// api.getMenus().then().catch()
// }
},
}
在组件里面使用请求
方法1
this.$store.dispatch(‘user/login’, {
username: this.form.username,
password: this.form.password
})
'user/login’指的是user.js文件里面叫Login的请求
后面传需要的参数
方法2
引入（固定写法）
import { createNamespacedHelpers } from ‘vuex’
const userModule = createNamespacedHelpers(‘user’) 注意：user为user.js的文件，封装发的请求在哪个文件就写哪个的名字
const { mapState: userState, mapActions: userActions } = userModule
在 methods里展开（相当于user.jsd的内容在当前文件中展开了，就可以直接调用user.js里的请求了）
…userActions([‘getMenus’])注意：getMenus为你需要展开的请求的名字
然后就可以直接调用这个请求了
补充
也可以直接调用userli里的state里的值
在 computed里调用
…userState([‘menus’])注意：menus为在user里中定义的state里的值