emm.有点乱乱的咩，今天学习了数据仓库哈。
折腾一天再想有点懵懵的。
为什么会有数据仓库一说？
从渲染讲起。
正常开发网页，写好一个模板文件，然后，根据数据的不同，进行填充页面，最终显示。这个获取数据，填充模板，最终呈现的过程，我们称之为渲染。服务器端渲染和浏览器端渲染
服务器端渲染：
将所有的数据，模板，绝大部分都在服务器，渲染完成,前端发个请求，后端send()一个页面。
浏览器端渲染：
创建各种各样的dom节点都属于浏览器端渲染，创建节点，以及template模板引擎，以及vue都属于浏览器端渲染。
服务器端渲染流程：
前端发送请求 -- > 服务器收到请求，开始处理数据 -- > 处理完成，告诉前端-- > 前端收到结果，再次发送请求-- >服务器收到请求，开始渲染页面 -- > 渲染完成，直接将页面sned()会去给前端 -- > 前端拿到页面，稍微润色，呈现出来。
浏览器端渲染流程：
前端发送请求 -- > 服务器收到请求，send() API数据会去 -- > 前端收到数据，开始执行js脚本 -- > 执行脚本，获取模板 -- > 模板动态添加数据，最终添加进html，最终呈现。
- 区别和优劣势是什么？
服务器端渲染，对客户端压力小，对服务器负载稍微大，一般国企都是采用的服务器端渲染浏览器端对服务器压力小，对客户端硬件要求稍微高一些。服务器端渲染，对SEO优化有很大帮助，客户端渲染则在这方面较为吃亏。一般，多页面应用，都是采用的服务器端渲染，目前，大部分浏览器端渲染的项目，都是单页面应用，在前端，通过路由的手法，实现多页面操作。
-如何处理单页面应用的数据问题？
公共的数据仓库，专门用来处理单页面应用开发的数据用的叫做：vuex
一、首先初始化项目 vue install webpack 项目名
vue install webpack 项目名
二、进入项目本地下载vuex
cd 项目名
npm install vuex --save-dev
三、在src目录下创建vuex文件夹，再创建数据仓库
四：store.js文件中创建数据
①：引入vue和vuex
import Vue from "vue";
import Vuex from "vuex";
②：全局引用vuex
Vue.use(Vuex)
③：定义数据
数据任意格式。数字、字符串、数组、对象.....
const state = {
con:10,
use:"pu",
obj:{
name:"大猪蹄子",
sex:"大概是个男的吧"
},
arr:["我是第一个","我是第二个","我是第三个","我是第四个"]
}
④：定义方法
各种方法
const mutations = {
add(con){
state.con++;
},
rem(con){
state.con--;
}
}
从组件中传参数数据，注意前面传值代表state
const mutations = {
/* 这里传个参数咩 arr代表state */
adval(arr,txt){
console.log(state)
state.arr.push(txt)
},
}
⑤：过滤数据方法
每次数据改变都会发生相应变化
const getters = {
con:function(){
return state.con +=20;
}
}
⑥：全局暴露一波数据、方法、过滤
export default new Vuex.Store({
state,
mutations,
getters
})
五、在vue模板中script中引入数据仓库、方法、过滤
@在vuex中已经封装好表示src
引入地址
对象形式引入数据、方法、过滤
import store from "@/vuex/store";
import {mapState,mapMutations,mapGetters} from "vuex"
六、在exprot defalut中的computed中暴露数据、属性、方法
export default {
name: 'HelloWorld',
data () {
return {
msg: 'hello'
}
},
/*暴露数据、属性、方法 */
store,
computed:{
...mapState(["con","arr"]),
...mapGetters(["con"])
},
methods:mapMutations(["add","rem"])
}
七、可以直接用啦
在没有引入方法之前，直接暴露数据，引用要加$结合点语法一层一层找，引入之后就不用啦。直接写。因为已经添加到数据中啦。
参考代码如下：
{{$store.state.use}}
{{$store.state.obj.name}}
{{$store.state.obj.sex}}
{{item}}
{{con}}