vuex面試題及答案，Vue(Axios+VueRouter+Vuex)的入門使用
1. axios
1.1什么是 axios
Axios 是一個(ge)基于 promise（promise是異步編(bian)程的(de)解決方案） 的(de) HTTP 庫(ku)，可(ke)以用在瀏(liu)覽器和 node.js 中
axios本質上(shang)也(ye)是對原生XMLHttpRequests的封(feng)裝，只(zhi)不(bu)過它是Promise的實現版本，符(fu)合(he)最新的ES規范
官網：
//www.axios-js.com/zh-cn/docs/vue-axios.html
1.2.安裝
在vue骨(gu)架(jia)工程中打開命令行執行
npm install --save axios vue-axios
1.3.配置
然后再main.js中加入:
import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)
1.4 快速使用
//發送一個get請求this. this.axios.get('//localhost:82/get',{params:{id:1}})
.then(res=>console.log(res.data)) //處理成功情況.catch(error=>console.log(error)) //處理失敗情況}//發起一個POST請求。this.axios.post('//localhost:83/post', {id: '1',name: 'bobo棒'})
.then(res=>console.log(res.data)) //處理成功情況.catch(error=>console.log(error)) //處理失敗情況案例：
當(dang)組件(jian)加載時(shi)通(tong)過axios獲(huo)取所有的(de)user對象。并v-for渲染
1.5 搭建springmvc環境供vue調用
1.5.1 pom.xml
<dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>5.1.5.RELEASE</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.22</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.8</version></dependency></dependencies><build><plugins><plugin><!-- 配置jetty --><groupId>org.eclipse.jetty</groupId><artifactId>jetty-maven-plugin</artifactId><version>9.4.28.v20200408</version><configuration><httpConnector><!-- 端口號 --><port>82</port><!-- 訪問路徑 --><host>localhost</host></httpConnector><!--監聽整個項目，如果項目源碼改變，1秒后 jetty自動重啟 --><scanIntervalSeconds>1</scanIntervalSeconds></configuration></plugin></plugins></build>
1.5.2 springmvc.xml
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="//www.springframework.org/schema/beans"xmlns:xsi="//www.w3.org/2001/XMLSchema-instance"xmlns:p="//www.springframework.org/schema/p"xmlns:aop="//www.springframework.org/schema/aop"xmlns:context="//www.springframework.org/schema/context"xmlns:mvc="//www.springframework.org/schema/mvc"xsi:schemaLocation="//www.springframework.org/schema/beans //www.springframework.org/schema/beans/spring-beans.xsd //www.springframework.org/schema/mvc //www.springframework.org/schema/mvc/spring-mvc.xsd //www.springframework.org/schema/aop //www.springframework.org/schema/aop/spring-aop.xsd //www.springframework.org/schema/context //www.springframework.org/schema/context/spring-context.xsd"><!--掃描注解-controller--><context:component-scan base-package="com.bobo.controller"/><!--配置視圖解析器--><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"><!--配置前綴--><property name="prefix" value="/WEB-INF/view/"></property><!--配置后綴--><property name="suffix" value=".jsp"></property></bean><!--開啟注解驅動--><mvc:annotation-driven/><!--放開靜態資源 css js jpg--><mvc:default-servlet-handler/></beans>
1.5.3 web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="//www.w3.org/2001/XMLSchema-instance" xmlns="//java.sun.com/xml/ns/javaee"xsi:schemaLocation="//java.sun.com/xml/ns/javaee //java.sun.com/xml/ns/javaee/web-app_3_0.xsd"version="3.0"><!--2 springmvc配置 --><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:springmvc.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>/</url-pattern></servlet-mapping><!-- post 中文亂碼解決提交亂碼處理 --><filter><filter-name>chartecode</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>utf-8</param-value></init-param></filter><filter-mapping><filter-name>chartecode</filter-name><url-pattern>/*</url-pattern></filter-mapping><listener><listener-class>org.springframework.web.context.request.RequestContextListener</listener-class></listener></web-app>
1.5.4 controller
@CrossOrigin//跨域@RestControllerpublic class HelloController {@GetMapping("get")
public User get(Integer id) {return new User(1, "bobo棒");
}
@PostMapping("add")public boolean add(@RequestBody User user) {System.out.println("接收數據"+user);return true;
}
}1.5.5 user
@Data@AllArgsConstructor@NoArgsConstructorpublic class User {private Integer id;private String name;
}2.VueRouter 路由
2.1 作用
Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構建單頁應用變得輕而易舉
什么是單頁面應用：
單(dan)頁Web應用（single page web application，SPA），就(jiu)是只有(you)一張Web頁面(mian)的(de)(de)應用。單(dan)頁應用程(cheng)序 (SPA) 是加(jia)載(zai)單(dan)個(ge)HTML 頁面(mian)并在用戶與應用程(cheng)序交互時動(dong)態(tai)更新該頁面(mian)的(de)(de)Web應用程(cheng)序。 瀏(liu)覽器一開(kai)始會加(jia)載(zai)必需(xu)的(de)(de)HTML、CSS和JavaScript，所有(you)的(de)(de)操作都在這張頁面(mian)上完成，都由(you)JavaScript來控制
可以簡單理解：根據路徑由路由展示對應的組件
2.2 單頁面應用案例
例如美團
//bj.meituan.com/shenghuo
2.3 安裝
在vue-cli創(chuang)建項目時(shi)，勾選即(ji)可
2.4 使用router插件
2.5 快速入門
案例需求：
要實現三(san)個(ge)組件之間的切換。
1首頁面組件
2 列表頁組件
3 詳情頁組件
2.5.1 創建三個組件
2.5.2 配置app.vue
2.5.3 配置路由
2.6 嵌套路由
用戶中心，和首頁面、列表頁面是一個(ge)級別的。
但是，用(yong)戶中心的(de)內容比(bi)較多，又分(fen)成了(le)多個子頁面，如(ru)：
1 我的購物車
2 我的收藏夾
3.我的訂單
這些(xie)頁面，是二級(ji)頁面
如何實現二級(ji)頁面之間(jian)的跳轉呢，這就是嵌套(tao)路由
第一步：
第二步:
2.7 動態路由
以下(xia)是兩個(ge)商品的詳情(qing)頁面(mian)，思考一(yi)下(xia)，我(wo)們是做一(yi)個(ge)頁面(mian)還是兩個(ge)頁面(mian)呢？如(ru)果一(yi)個(ge)商品做一(yi)個(ge)頁面(mian)，顯然不合適。
既然是1個頁面，我們如何在瀏覽時，能夠顯示不同的內容呢?
這里就有(you)一個動(dong)態的概念。
在進(jin)行(xing)數(shu)據渲染的時候，一定會通過不同(tong)的參數(shu)，傳遞不用的商品信(xin)息，然后進(jin)行(xing)渲染。
這個參數，一(yi)般就(jiu)是商(shang)品id。
//item.jd.com/3726830.html//item.jd.com/3984684.html//item.jd.com/4461494.html
比如，上面三個網址(zhi)中的數字(zi)，其實就是商品的id。
要(yao)實現這么功能 --- 一個頁面，載入不同的(de)內容，就叫做動(dong)態路由。
在(zai)vue-router中，要實(shi)現動態路由，從(cong)兩個方面出發：
1 在網(wang)址中(zhong)傳入(ru)參數
2 如何在代碼中接受這個參數
第一步：
增加商品鏈接
第二步：
第三步：
3. Vuex
3.1 什么是Vuex
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。
它采用(yong)集中式存儲管理(li)應用(yong)的所有組件的狀(zhuang)態，并以(yi)相應的規(gui)則保(bao)證狀(zhuang)態以(yi)一種(zhong)可(ke)預測的方式發生變化。
每一個 Vuex 應用的核心就是 store（倉庫）
倉庫是(shi)用來(lai)干嘛的(de)，顧名思義倉庫就是(shi)存儲某些東西的(de)，需要(yao)就從里(li)面拿取出來(lai)。那么我(wo)們(men)就可以先理解為(wei)vuex是(shi)幫(bang)我(wo)們(men)存儲數據的(de)。vuex 作(zuo)為(wei)內(nei)存來(lai)存儲，一般在登錄(lu)成功時需要(yao)把(ba)用戶信(xin)息，菜單信(xin)息等放(fang)置 vuex 中，作(zuo)為(wei)全局的(de)共(gong)享數據
我們先(xian)來(lai)看(kan)下(xia)store長什么樣子(zi)
export default new Vuex.Store({state: {
count:2},getters: {
},mutations: {
},actions: {
},modules: {
}
})我們可(ke)以(yi)看到store對(dui)象(xiang)里(li)面包含(han)了state,而(er)state也是(shi)一(yi)個對(dui)象(xiang)，所(suo)以(yi)"store”基本上(shang)就(jiu)是(shi)一(yi)個容(rong)器。仔細一(yi)看，這個store就(jiu)是(shi)用來存儲數據(ju)而(er)已
Vuex 和單純的全局對象有以下兩點不同：
1.Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
2.你不能直接改變(bian) store 中的(de)(de)狀態。改變(bian) store 中的(de)(de)狀態的(de)(de)唯一(yi)途徑就(jiu)是顯式地提(ti)交(jiao) (commit) mutation。這樣使得(de)我(wo)(wo)們(men)可以方便地跟蹤(zong)每一(yi)個狀態的(de)(de)變(bian)化，從而(er)讓我(wo)(wo)們(men)能夠實現(xian)一(yi)些(xie)工具幫助我(wo)(wo)們(men)更好(hao)地了(le)解我(wo)(wo)們(men)的(de)(de)應(ying)用。
好了，現在我(wo)們可(ke)以這(zhe)樣(yang)理(li)解store：Vue的(de)核心是組(zu)件(jian)(jian)，那么(me)組(zu)件(jian)(jian)之間怎么(me)進行通(tong)信呢(ni)？我(wo)們第一時(shi)間會(hui)想到(dao)父子組(zu)件(jian)(jian)之間的(de)通(tong)信props和$emit，那非父子關系(xi)的(de)組(zu)件(jian)(jian)怎么(me)通(tong)信呢(ni)？當然辦(ban)法還是有的(de)，或許你會(hui)想到(dao)事件(jian)(jian)傳參或者多層嵌套，但是這(zhe)樣(yang)就(jiu)是使(shi)得代碼臃腫并且難以維護。
因(yin)此Vuex應(ying)運而生，把(ba)組件共(gong)享狀態抽取(qu)出(chu)來，以一個全局單(dan)例模式管理。另外，通過定(ding)義和隔離狀態管理中的(de)各種概念并強(qiang)制遵守一定(ding)的(de)規則，我們的(de)代碼將會(hui)變(bian)得更結構化且易(yi)維(wei)護。
簡單來說，就是把組件需要共享的數據抽取出來，交給store來處理
此外,store是(shi)內(nei)存(cun)機制，而不(bu)是(shi)緩存(cun)機制，當(dang)前頁面一(yi)旦刷(shua)新或者通過路由(you)跳轉亦或是(shi)關閉，都(dou)會導致store初始(shi)化。因此在(zai)之前就暫時把store看成一(yi)個多功(gong)能的(de)全(quan)局(ju)變量.
那么store一般保(bao)存的(de)是什么數據呢(ni)？
1.組件的初始數(shu)據 2.后(hou)臺返(fan)回來的初始數(shu)據
現在(zai)相信大家對Vuex有了(le)(le)初步的了(le)(le)解，那么我們來進一步了(le)(le)解Vuex的核心概(gai)念,分別是
State、 Getter、 Mutation、 Action、 Module
3.2 實現開始
1）index.js
count 定(ding)義為2
2） 獲取狀態state
隨便一個組件
有三種方式(shi)可以獲取該(gai)變量count
方式1：
{{this.$store.state.count}}方式2：
方式3：
3)getters
如果(guo)存的數據比較多，我們想過濾獲取(qu)
4)Mutations
更改 Vuex 的 store 中的狀態的唯一方法是(shi)提(ti)交 mutation。
5）Actions
Actions的作用(yong)用(yong)于異步的修(xiu)改數據。
實際上(shang)，mutation中(zhong)的(de)函數，只能是同(tong)步的(de)，不能使(shi)用異步的(de)。
目前在(zai)我(wo)們所(suo)學(xue)的(de)知識當中(zhong)，有(you)一(yi)類函數是(shi)異(yi)步(bu)的(de) --- 定時器函數。
比如setTimeout。
Action 函數接受(shou)一個與(yu) store 實例具有(you)相同方法和屬性的 context 對象，可(ke)以通(tong)過context.commit提交，也(ye)可(ke)以通(tong)過context.state獲取(qu)state。
可以通過
this.$store.dispatch('action'); 進行調用
