vuex实现数据共享

这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战

1. Home.vue 组件和 City.vue组件之间如果能够有公用的组件，就可以实现数据的共享 -- Vuex 数据层框架

2. npm install vuex --save

3. src 下创建一个store文件夹，建一个index.js 文件

4. index.js文件内

5. main.js内配置

   1. 引入
   2. 根vue实例内传入store、
   3. Header数据要共享
      1. header的数据不再从ajax获取，而是直接通过前端获取 --this.$store.state.XXX

6. 点击某一个城市，对应的跟着改变 即 -- 改变 state，即 先调用Actions， 再调用Mutations

   1. 

   2. 

   3. 没有异步信息的时候，可简化，无需action

   4. 路由 页面跳转

      1. 直接这样写会将router-link置换成a标签，样式会破坏掉。因此 直接将原标签置换成router-link，在后面用tag表明原标签即可、 实现参数传递
      2. js跳转 router.push(location, onComplete?, onAbort?)
      3. 动态路由

   5. localStorage

7. ==使用localStorage可能会出现问题，比如用户关闭了本地存储的功能或者使用了隐身模式，用try, catch 包裹！！== 8. 拆分index.js使其更好维护 9. 宽度有点问题时，可用min-width 代替 width 10. vuex优化 1. 把vuex里的数据映射到组件computed里 2. 3. ...mapState(['city']) 可以这样写出数组，也可以写成对象

• ...mapState(['city']) ==等价于==
• ...mapState({ currentCity: 'city' }) 把vuex里的公用数据city映射到当前组件的计算属性里。映射过来的名字叫currentCity

4. getters 类似于computed属性，当要根据state计算出新的属性时使用，避免数据的冗余 5. Module 对一个复杂的Mutations或者actions进行拆分 具备更好的可维护性

==报错==

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>

解决方案

blog.csdn.net/m0_38082783…

10. keep-alive 解决每次点击都重新获取ajax内容的问题

    解决方案

    1. keep-alive

       外层包裹keep-alive

    意思就是路由内容被加载一次之后，就将路由的内容存放在内存之中，下一次再进行路由的时候，就不需要重新渲染这个组件，去重新执行生命钩子函数，只需把以前的内容拿出来显示到页面即可 2. 改变缓存里的数据 activated 生命周期函数 首次进入，mounted和activated都会执行，重新被显示时，只有activated会执行 当页面重新被激活时，看有无改变，有改变再去重新发送ajax请求