7.Vuex
1.store目录下生成index.js
import Vue from "vue";
import Vuex from "vuex";
import { HEADER } from './modules/mutationTypes';
import headerModules from './modules/header';
Vue.use(Vuex)
// 使用export封装代码,让外部可以引用
export default new Vuex.Store({
modules: {
[HEADER]: headerModules
}
})
2.store目录下新建modules存放具体某项配置
新建header.js存放基础配置
新建header.js存放基础配置
import {
USER_INFO, NOW_APP, SET_USER_INFO, SET_NOW_APP
} from './mutationTypes'
//1.state
//this.$store.state.header.nowApp.name
const state = {
userInfo: {
userName: '未知用户',
userId: '000000',
roleList: ['非法用户'],
email: '',
code: '000000'
},
// 汇总数据查询任务ID
nowApp: {}
}
//2.getters
const getters = {
[USER_INFO]: state => state.userInfo,
[NOW_APP]: state => state.nowApp
}
//3.actions
const actions = {
[SET_NOW_APP]({ commit }, data) {
commit(SET_NOW_APP, data)
}
}
//4.mutations
const mutations = {
[SET_USER_INFO](state, data) {
state.userInfo = data
},
[SET_NOW_APP](state, data) {
state.nowApp = data
}
}
export default {
namespaced: true, // 开启命名空间
state, // 共同维护的一个状态,state里面可以是很多个全局状态
getters, // 获取数据并渲染
actions, // 数据的异步操作
mutations // 处理数据的唯一途径,state的改变或赋值只能在这里
}
3.modules下新建mutationTypes.js存放常量配置,至此store目录下配置完成
//此文件存放vuex中mutation常量
// header模块
export const HEADER = 'header'
// getters
export const USER_INFO = 'USER_INFO'
export const NOW_APP = 'NOW_APP'
// mutations
export const SET_USER_INFO = 'SET_USER_INFO'
export const SET_NOW_APP = 'SET_NOW_APP'
4.main.js中将store挂载到当前项目的Vue实例中
import store from "./store";
new Vue({
el: '#app',
router,
store, //store:store 和router一样,将我们创建的Vuex实例挂载到这个vue实例中
render: h => h(App)
})
5.在组件中使用Vuex
<h2>vuex状态:{{ $store.state.header.nowApp.name }}</h2>
修改状态
<div><button class="btn" @click="setAppName">++++++</button></div>
<script>
import { mapActions } from "vuex"
import { HEADER, SET_NOW_APP } from "@/store/modules/mutationTypes"
export default {
methods:{
// 语法糖,调用store下header.js中3.actions修改状态信息
...mapActions(HEADER, {
// 相当于this.$store.dispatch('modifyName'),提交这个方法
setNowApp: SET_NOW_APP,
}),
setAppName(){
let defaultApp = {name:'nnnn'};
console.log(">>>>>",defaultApp);
this.setNowApp(defaultApp);
console.log(">>>>>",this.$store.state.header.nowApp.name);
},
//跳转
trunToB () {
this.$router.push({path: "/pages/userGroupDetail"}) // 路由跳转到详情页
}
}
}