状态管理
https://blog.csdn.net/moonpure/article/details/76254850
方法一 , 在脚手架创建项目时,选择vuex
1, 在组件中使用状态数据
// 从vuex中按需导入状态数据的映射函数mapState
import { mapState } from 'vuex'
// 使用映射函数把状态数据state映射到计算属性中
computed: {
...mapState(["isLogin"])
}
<!-- state在映射到计算属性中之后,当作计算属性来用 -->
登录状态: {{isLogin}}
2, 在组件中修改状态数据
this.$store.commit("setLogin", true)
------------------------------------------------------------------------
方法二: 在项目写一半时手动添加(最新版为5.0.0, 此处示例为v3.6.2版本)
1, 下载安装vuex模块 (安装最新版4.0会报错)
cnpm i vuex@3.6.2 --save
2, 在/src目录下新建文件 /src/store/index.js 导入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3, 在/src/store/index.js中创建管理仓库, 并导出
export default new Vuex.Store({
state: {
},
mutations: {
}
})
4, 在main.js中导入store/index.js状态管理仓库, 帮把它添加到vue根组件中
import store from './store'
new Vue({router, store})
5, 在组件中使用状态数据
// 从vuex中按需导入状态数据的映射函数mapState
import { mapState } from 'vuex'
// 使用映射函数把状态数据state映射到计算属性中
computed: {
...mapState(["isLogin"])
}
<!-- state在映射到计算属性中之后,当作计算属性来用 -->
登录状态: {{isLogin}}
6, 在组件中修改状态数据
this.$store.commit("setLogin", true)
图片懒加载
1, 安装图片懒加载模块
(安装最新版的会报错 安装指定版本)
cnpm install vue-lazyload@1.3.3 --save
2, 在main.js入口文件中引入图片懒加载模块
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
loading: require("@/assets/holder.png")
})
3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可
<img v-lazy="roomData.room_src" alt="">