路由相关内容以及vux相关内容

两种路由模式：

一、hash路由模式通过hashchange监听hash变化，history模式下通过对pushState及replace方法重写，通过dispatchEvent调用popstate回调

区别：

hash模式：

Url路径会出现#字符

hash不包括在http请求它是由前端路由处理 所以改变hash值不会刷新页面不会向服务器发送请求

Hash的值改变会触发hashchange事件

二、history模式：整个地址重新加载可以保存历史记录、

三、路由传参方法

query传参和params传参及props

传递数据方式

方式1 ：路由路径携带参数（param或query）query等同于？name=sss

方式2：<router-view>属性携带数据，props声明接收

二、vuex

vuex是一个状态管理工具，主要解决复杂项目的数据共享问题，主要包括state,actions,mutations,getters和modules 5个属性

存值：组件通过$store.dispatch触发 actions，actions是异步操作，在actions中通过commit触发mutations，mutations里面可以直接修改state状态，状态的改变会自动同步到组件中,而getters相当于组件的计算属性，他是对组件中获取到的数据做提前处理的.

取值:可以直接使用this.$stroe.state.模块.属性获取出来,或者干脆使用提供的辅助函数,有mapState mapGetters mapMutations mapActions

另外一个命名空间的问题，就是为了让当前vuex模块里面的状态名，函数名不和其他的模块命名产生冲突。但是在调用的时候需要加上模块名字;

state:vuex的基本数据用来存储变量

getters:相当于state的计算属性

mutations:提交更新数据的方法 必须是同步的（如果需要异步使用action）

每个mutation都有一个字符串的事件类型 type和回调函数

action: 提交的是mutation 不是直接更新状态 可以进行异步操作

modules: 模块化vuex 可以让每一个模块拥有自己的state、mutation、action、getters使得结构非常清晰

（1） vuex如何实现数据持久化（即刷新后数据还保留）？

因为vuex中的state是存储在内存中的，一刷新就没了，

解决方案有：

第一种：利用H5的本地存储(localStorage,sessionStorage)

第二种：利用第三方封装好的插件，例如：vuex-persistedstate

在vue3的pinia状态管理中.数据持久化,也是借助了一个持久化的插件,但是本质上,还是调用了本地存储,这两个插件,都能在里面进行具体的配置,可以只去持久化需要持久化的部分.