计算属性
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