vuex

计算属性

1.语法

computed:{
  username(){
      return sessionStorage.getItem("username");
  }
}

2.使用computed取值

不需要再data中声明变量 并且在缓存中存储,只要属性名字不改变每次都会从缓存中取值

禁止使用箭头函数

vuex

1.下载安装vuex

npm install vuex@3.2.0 --save

安装成功

2.配置vuex

1)创建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
export default store

2)修改main.js文件

/*  vuex */
import store from './store'
 
。。。。。。。。。。。。。
new Vue({
。。。。
    store,
    render: h => h(App)
}).$mount('#app')
 

3.获取count

state：需要管理的全局data

mutations：定义改变全局data的方法，Mutation 必须是同步函数

actions：同mutation类似，也是定义修改全局data的方法，不同的是可以进行异步操作

getters：可以理解成vuex的computed计算属性，state发生变化他也会同步发生变化

modules:可以对vuex的state进行分模块管理

4.使用vuex存值取值

1)修改配置

2)访问

后端可以拿到token

5.异步交互

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)


const store = new Vuex.Store({
  state: {
    count: 10 ,//全局变量  在整个vue项目的任何地方都可以使用
	username:"",
	token:"",
	add:"",
  },
  mutations: {
	  //更改全局变量的值
    increment (state,val) {
      state.count+=val;
    },
	setUsername(state,val){
		state.username=val
	},
	setToken(state,val){
		state.token=val
	},
	disadd(state,val){
		state.add=val
	}
  },
  actions:{
	  //dispath   提交
	  disadd(context,val){
		  context.commit("disadd",val)
	  }
  },
  getters:{
	  
  }
})
export default store

动态菜单

后端

1.controller

2.model

3.mapper

4.mapper.xml

前端

1.index.js

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)


import axios from 'axios'
// 后端项目的时候  http://localhost:8848
// axios设置一个默认的路径 
 // 创建实例时配置默认值
 const instance = axios.create({
  // 访问路径的时候假的一个基础的路径
   baseURL: 'http://localhost:8848/',
   //withCredentials: true
 });
 //
 instance.interceptors.request.use( config=> {
 	 // config 前端  访问后端的时候  参数
  	 // 如果sessionStorage里面于token   携带着token  过去
  	 if(store.state.token){
  		 // token的值  放到请求头里面
  		 let token = store.state.token;
  		 config.headers['token']=token;
  	 }
  	 // config.headers['Authorization']="yyl"
  	  
     return config;
   }, error=> {
     // 超出 2xx 范围的状态码都会触发该函数。
     // 对响应错误做点什么
     return Promise.reject(error);
   });




const store = new Vuex.Store({
  state: {
    count: 10 ,//全局变量  在整个vue项目的任何地方都可以使用
	username:"",
	token:"",
	add:"",
	menuList:[]
  },
  mutations: {
	  //更改全局变量的值
    increment (state,val) {
      state.count+=val;
    },
	setUsername(state,val){
		state.username=val
	},
	setToken(state,val){
		state.token=val
	},
	disadd(state,val){
		state.add=val
	},
	menuList(state,val){
		state.menuList=val
	}
  },
  actions:{
	  //dispath   提交
	  menuInfo(context){
		  //发送异步请求
		  instance.get("tab-menu").then(res=>{
			  //console.log(res.data.t)
			  //存到state中
			  context.commit("menuList",res.data.t)
			  
		  })
	  }
	  
  },
  getters:{
	  menuList:(state)=>{
		  return state.menuList;
	  }
  }
})
export default store

2.取值

3.保存数据到store

4.登录访问