⑴ 5分鍾掌握Vuex，從原理到使用深入淺出
一、什麼是Vuex？概念：Vuex是一個專為Vue.js應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
簡單點來說（說人話），就是實現任意組件中通信，並可以檢測數據的變化。
二、Vuex原理Vuex是集中於MVC模式中的Model層，規定所有的數據操作必須通過action-mutation-state的流程來進行，再結合Vue的數據視圖v-moder等雙向綁定特性來實現頁面的展示更新。
下面看一張圖來了解全過程。
簡述主要方法詳情：
VueComponents：Vue組件。展示頁面，負責接收用戶操作等交互行為，執行dispatch方法觸發對應action進行回應。
dispatch：操作行為觸發方法。是唯一能執行action的方法。
actions：操作行為處理模塊。處理VueComponents接收到的所有交互行為。包含同步/非同步操作，支持多個同名方法，按照注冊的順序依次觸發。向後台API請求的操作就在這個模塊中進行，包括觸發其他action以及提交mutation的操作。該模塊提供了Promise的封裝，以支持action的鏈式觸發。
commit：狀態改變提交操作方法。對mutation進行提交，是唯一能執行mutation的方法。
mutations：狀態改變操作方法。是Vuex修改state的唯一推薦方法，其他修改方式在嚴格模式下將會報錯。該方法只能進行同步操作，且方法名只能全局唯一。操作之中會有一些hook暴露出來，以進行state的監控等。
state：頁面狀態管理容器對象。集中存儲Vuecomponents中data對象的零散數據，全局唯一，以進行統一的狀態管理。頁面顯示所需的數據從該對象中進行讀取，利用Vue的細粒度數據響應機制來進行高效的狀態更新。
總的一句話簡述就是：
Vue組件接收交互行為，調用dispatch方法觸發action相關處理，若頁面狀態需要改變，則調用commit方法提交mutation修改state，通過getters獲取到state新值，響應數據或狀態給Vue組件，界面隨之更新。
三、Vuex的使用1.安裝npminstallvuex--save
2.新建一個文件夾store，創建inde.js隨便叫啥，隨便建不建立文件夾。為了規范。
importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)//准備actions---用於響應組件中的動作constactions={}//准備mutations---用於操作數據（state）constmutations={}//准備state---相當於data，用於存儲數據conststate={}//實例化創建並導出storeexportdefaultnewVuex.Store({namespaced:true,//解決模塊命名沖突actions,mutations,state,})注意：
我們在這一步創建index.js文件的時候導入並引用Vuex，因為我們要實例化Vuex對象。如果在main引入，會導致在main.js導入store的時候報錯。
先來一點簡單的存放數據，取出查看。在一系列操作之後我們的VM（ViewModel）和VC（Viewcomponent）身上都已經都有store這個數據源對象。所以我們可以從store身上使用this.$store.state.xxx獲取數據。
在index.js中准備數據
conststate={name:'浪漫主義碼農',age:18,}在組件中獲取數據
<template><div>我放在store中的數據是{{this.$store.state.name}},{{this.$store.state.age}}</div></template>在知道每一個vm和vc身上都有store就可以好好操作了。
mutation--更改store中狀態的唯一方法根據上面的原理圖，我們能知道vuex中規定只能通過提交mutation的方式去更改store中的狀態，包括action中的操作，也是通過提交mutation去修改。另外一點就是vuex中規定mutation中不能包含非同步操作
我們來修改上面的name、age屬性。
constmutations={modify_age(state){//不帶參數修改age屬性,state是默認的參數state.name="張三";state.age=20;},modify_age2(state,payload){//帶參數修改，payload是傳入的對象,官網叫載荷（payload）state.name=payload.name;state.age=payload.age;}}在組件中，我們要使用this.$store.commit('xxx(方法名)',參數;
參數可以是對象也可以是單一屬性
<template><div>我放在store中的數據是{{this.$store.state.name}},{{this.$store.state.age}}<button@click="setDefault">不帶參修改</button><button@click="setparameter">帶參修改</button></div></template><script>exportdefault{methods:{setDefault(){this.$store.commit("modify_age");},setparameter(){this.$store.commit("modify_age2",{name:"王五",age:100});//載荷形式，傳入可以使對象或者單個屬性//this.$store.commit({//對象形式，傳入可以使對象或者單個屬性//type:"modify_age2",//name:"王五",//age:100,//});});},},};</script>Action類似於mutation，不同在於：
Action提交的是mutation，而不是直接變更狀態。
Action可以包含任意非同步操作。
後台API請求在這個模塊進行請求。所有的操作最後都要到達mutation進行操作，更改state的狀態。
還是上面一個例子，非同步修改state的屬性
先上代碼
constactions={asy_modify(context){//無參setTimeout(()=>{//非同步操作context.commit("modify_age")},2000);},asy_modify2(context,plyload){//有參setTimeout(()=>{context.commit("modify_age2",plyload);},2000);}}constmutations={modify_age(state){//不帶參數修改age屬性,state是默認的參數state.name="張三";state.age=20;},modify_age2(state,payload){//帶參數修改，payload是傳入的對象,官網叫載荷（payload）state.name=payload.name;state.age=payload.age;}}conststate={name:'浪漫主義碼農',age:18,}在組件中使用this.$store.dispatch('xxx')
<template><div>我放在store中的數據是{{this.$store.state.name}},{{this.$store.state.age}}<button@click="setDefault">不帶參修改</button><button@click="setparameter">帶參修改</button></div></template><script>exportdefault{methods:{setDefault(){this.$store.dispatch("asy_modify");},setparameter(){this.$store.dispatch("asy_modify2",{name:"王五",age:100});//載荷形式，傳入可以使對象或者單個屬性//this.$store.dispatch({//對象形式，傳入可以使對象或者單個屬性//type:"asy_modify2",//name:"王五",//age:100,//});},},};</script>注意觀察時間，2s後變化。
分析一波：
Action裡面的函數接受一個與store實例具有相同方法和屬性的context對象，因此你可以調用context.commit提交一個mutation，或者通過context.state和context.getters來獲取state和getters。
action事件的觸發同樣可以使用載荷和對象兩種方式
6.gettergetter，我們可以理解為是對store中state的一些派生狀態，也可以理解為一種計算屬性，它類似於計算屬性一樣，返回值會根據它的依賴被緩存起來，且依賴對象發生改變的時候它才會被重新計算。
getter屬性相當於很多個組件需要對數據進行一樣的處理，可以理解為公共的計算屬性。
這樣就很清晰了
Getter接受state作為其第一個參數，也可以使用箭頭函數。
constgetters={get_object:function(state){//無參if(state.age<18){returnstate.name+'未成年'}returnstate.name+'已經成年了'},get_object2:function(state){//有參數returnfunction(value){returnstate.name+value;}}}組件中{this.$store.getters.xxx來獲取
<template><div>我放在store中的數據是{{this.$store.state.name}},{{this.$store.state.age}}<br/><span>不帶參數的數據：{{this.$store.getters.get_object}}</span><br/><span>帶參數的數據(攜帶一個剛好18歲)：{{this.$store.getters.get_object2("剛好18歲")}}</span></div></template>Vuex允許我們將store分割成模塊（mole）。每個模塊擁有自己的state、mutation、action、getter、甚至是嵌套子模塊。這里就不過多介紹了，看官方文檔(Mole|Vuex(vuejs.org))
8.輔助函數vuex提供了幾個的輔助函數，有mapState、mapGetter、mapMutation、mapAction。都是一些復雜語句的簡寫形式。
引入函數
importstorefrom'./store/index'//引入寫好的store.....newVue({el:'#app',router,store,//使用storetemplate:'',components:{App}})0mapState如果state中的數據很多，那我們要重復寫很多這樣的this.$store.state.XXX代碼,我們就可以通過mapState來映射。
數組的寫法
importstorefrom'./store/index'//引入寫好的store.....newVue({el:'#app',router,store,//使用storetemplate:'',components:{App}})1如果你想取名別名的話，就要寫成對象的形式
importstorefrom'./store/index'//引入寫好的store.....newVue({el:'#app',router,store,//使用storetemplate:'',components:{App}})2mapGettersmapGetters和mapState很相似，只不過是映射Getters。替代this.$store.getters.XXX
importstorefrom'./store/index'//引入寫好的store.....newVue({el:'#app',router,store,//使用storetemplate:'',components:{App}})3mapMutation替代this.$store.commit('XXX')
importstorefrom'./store/index'//引入寫好的store.....newVue({el:'#app',router,store,//使用storetemplate:'',components:{App}})4mapAction替代this.$store.dispatch('XXX')
importstorefrom'./store/index'//引入寫好的store.....newVue({el:'#app',router,store,//使用storetemplate:'',components:{App}})5以上這些輔助函數，涉及到傳參都需在使用的計算屬性的時候傳入。
四、寫在最後更具體的請看官網文檔，歡迎各位大佬指點江山。
看到最後點贊收藏吧，聽說評論區可以抽獎噢！
⑵ 如何利用HBuilderX軟體開發vue.js
直接調用即可，將引入jquery的script src=放在使用jQuery的js程序的前面。