七.vue项目整合问题

Posted on

一、vue项目整合中遇到的问题

1.1 vuex中插件的使用

1.1.2 插件的功能

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

  1. 添加全局方法或者属性。如: vue-custom-element
  2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
  3. 通过全局混入来添加一些组件选项。如 vue-router
  4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
  5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//vuex 状态持久化插件 —— vuex-persistedstate
//安装：

　　npm install --save vuex-persistedstate

//引用：

　　import createPersistedState from 'vuex-persistedstate'

//配置：

　　new Vuex.Store({plugins: [createPersistedState()] })

//作用：

　　将 vuex 状态保存到 localstorage 中
1.1.3 持久化插件优点

Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。

引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中

1.2图片的懒加载

1
2
3
4
5
6
7
8
<img v-lazy="item.v_pic"  />
    
  /*懒加载的样式*/
 img[lazy="loading"] {
     width: 40px;
     height: 300px;
     margin: auto;
   }

1.3路由的返回设置

1
2
3
4
reggoback(){
            this.$router.go(-1)
            //返回上一级的路由
        },
  • this.$router.go(val) => 在history记录中前进或者后退val步，当val为0时刷新当前页面。
  • this.$router.push(path) => 在history栈中添加一条新的记录。