1.动态导航栏：借助 vuex 实现侧栏顶栏的级联效果和刷新不复原

需要 vuex 结合本地存储保存五种东西：（登录之后获取用户信息、用户权限、用户功能列表栏等内容！并进行存储）

• 整个父子选择列表（最外层为顶栏，其余均为侧边栏） 基本结构： 其中 url 是选择项对应的路由路径，必须要有的 包括 iconUrl 也是通过一定的构造方法构造出图标 这些动态的内容都需要在数据库中进行存储！
• 当前顶栏的选择项 id 对应的侧边栏列表（首次登录之后默认为第一个顶栏的第一个侧栏）（初始化的时候，或者每次在点击顶栏选择项的时候进行变化）
• 当前选择的侧栏选择项 id（用于刷新之后保持原来的项位置不变！）（首次登录之后默认为第一个顶栏的第一个侧栏的最小子项的 id）（初始化的时候，或者每次在点击顶栏选择项或者侧栏选择项的时候进行变化）
• 当前选择的侧栏选择项 url（用于指定/main 链接时应当跳转到的路径，或者路由被拦截之后跳转到的地方，很重要的！，因为不可能在/main 这个路径，肯定是它的子路径）（首次登录之后默认为第一个顶栏的第一个侧栏的最小子项的 url）（初始化的时候，或者每次在点击顶栏选择项或者侧栏选择项的时候进行变化）

2.vuex 实现本地存储

Vuex-persistedstate 这个插件的原理结合了存储方式，只是统一配置后就不需要手动写存储方法了

使用方法：

安装:

npm install vuex-persistedstate --save

在 store 下的 index.js 中引入配置:

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

export default createStore({
	state: {},
	mutations: {},
	actions: {},
	modules: {},
	plugins: [createPersistedState()],
});

这样是默认存储到 localStorage，如果想要存储到 sessionStorage，或者想要存储指定的 state：

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";
export default createStore({
	state: {},
	mutations: {},
	actions: {},
	modules: {},
	plugins: [
		// 把vuex的数据存储到sessionStorage
		createPersistedState({
			storage: window.sessionStorage,
			reducer(val) {
				return {
					// 只存储state中的userData
					userData: val.userData,
				};
			},
		}),
	],
});

本地存储与 vuex 的使用策略：

1.如果数据需要实时更新，就存储到 vuex 2.如果数据只需要持久化保存，不需要更新，就存储到本地 3.如果数据既需要实时更新也需要持久化保存，那么就使用插件实现 vuex 的持久化

3.大坑：vue 的 data 里面不能使用 this.data 中的数据

例如：

<template>
	<div>PrototypeManagement</div>

	<div>{{ value2 }}</div>
</template>

<script>
export default {
	data() {
		return {
			value1: "你好",

			value2: this.value1 + 100, //大错特错
		};
	},
};
</script>

不能直接使用 data 中的数据并在 data 里面初始化（并且这样使用了报错还不会给提示，很恶心），如果想要通过 data 中的数据构造 data 可以使用计算属性，或者在 mounted 中进行构造初始化！

注意：除此之外，本地存储获取的数据，通过方法的返回值获取的数据，都可以在 data 里面直接初始化，没必要在 mounted 中进行！

4.vuex 实现动态更新：使用 computed

pageA:

触发 mutation：

_this.$store.commit("detail/setPlayUrl", data.data.data); //存vuex

pageB:

展示数据：

<template>
	<div class="bottom">
		{{ a }}
		<audio v-bind:src="getPlayUrl" controls="controls">
			Your browser does not support the audio element.
		</audio>
	</div>
</template>
<script>
export default {
	name: "index",
	data() {
		return {
			// url:this.$store.state.detail.playUrl,  //如果这样写的话会更新不了
			a: "1", //这个在本组件里面的数据就可以更新 这个a 在created生命周期后三秒改变值就可以更新视图
		};
	},
	computed: {
		//这里需要把store 动态的数据放到computed里面才会同步更新 视图
		getPlayUrl() {
			return this.$store.state.detail.playUrl;
		},
	},
	created() {
		// console.log('url',this.url);
		let _this = this;
		setTimeout(function () {
			_this.a = 10;
		}, 3000);
	},
};
</script>

<style scoped>
.bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
</style>

结论：

1.本组件内 data 的数据和 prop 传递过来的数据直接能同步双向绑定和更新视图

2.vuex 中 store 的数据需要放到 computed 里面实时计算才能同步更新视图