emm.有点乱乱的咩，今天学习了数据仓库哈。
折腾一天再想有点懵懵的。
-
为什么会有数据仓库一说？
从渲染讲起。
正常开发网页，写好一个模板文件，然后，根据数据的不同，进行填充页面，最终显示。这个获取数据，填充模板，最终呈现的过程，我们称之为渲染。
-
服务器端渲染和浏览器端渲染
服务器端渲染：
浏览器端渲染：
服务器端渲染流程：
前端发送请求 -- > 服务器收到请求，开始处理数据 -- > 处理完成，告诉前端-- > 前端收到结果，再次发送请求-- >服务器收到请求，开始渲染页面 -- > 渲染完成，直接将页面sned()会去给前端 -- > 前端拿到页面，稍微润色，呈现出来。
浏览器端渲染流程：
前端发送请求 -- > 服务器收到请求，send() API数据会去 -- > 前端收到数据，开始执行js脚本 -- > 执行脚本，获取模板 -- > 模板动态添加数据，最终添加进html，最终呈现。
-
区别和优劣势是什么？
-如何处理单页面应用的数据问题？
公共的数据仓库，专门用来处理单页面应用开发的数据用的叫做：vuex
一、首先初始化项目 vue install webpack 项目名
vue install webpack 项目名
二、进入项目本地下载vuex
cd 项目名
npm install vuex --save-dev
三、在src目录下创建vuex文件夹，再创建数据仓库
创建数据文件夹.png
四：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"])
}
七、可以直接用啦
在没有引入方法之前，直接暴露数据，引用要加$结合点语法一层一层找，引入之后就不用啦。直接写。因为已经添加到数据中啦。
参考代码如下：
<h2>{{$store.state.use}}</h2>
<span>{{$store.state.obj.name}}</span>
<span>{{$store.state.obj.sex}}</span>
<li v-for = "item in arr">{{item}}</li>
<!-- 这里就可以直接写啦 -->
<p>{{con}}</p>
<!-- <button @click="$store.commit('add')">增加</button> -->
<!-- 简写一波 -->
<button @click="add">增加</button>
<!-- <button @click="$store.commit('rem')">减少</button> -->
<button @click="rem">减少</button>
网友评论