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"}) // 路由跳转到详情页
    }
  }
}