Vuex：是一個(gè)集中式狀態(tài)管理工具美旧，相當(dāng)于react中的 redux
? ? 1） 主要解決的問題：大中型項(xiàng)目中復(fù)雜組件通訊問題
? 2）? vuex操作流程：
? ? ? ? ? ? dispatch? ? ? ? ? ? ? ? ? commit
vue組件---------------->actions------------>mutations------->state-------->vue組件更新
3）vuex的重要概念：? ? ? ? ? state:要保存的狀態(tài)? ? ? ? ? mutations:是最終改變狀態(tài)的方法集，mutations中的代碼是同步執(zhí)行的? ? ? ? ? actions:4）使用步驟：? ? ? ? 第一步：先安裝vuex? ? ? ? ? ? ? npm install vuex --save? ? ? 第二步：在src創(chuàng)建一個(gè)store目錄呼猪，用來存放vuex相關(guān)文件? ? ? ? 第三步：在store目錄先創(chuàng)建一個(gè)index.js文件奠支，做為vuex入口文件? ? ? 第四步：在store目錄的index.js中，寫入下面的內(nèi)容//引入vuex，vueimportVuexfrom'vuex';importVuefrom'vue';//讓vue識別vuexVue.use(Vuex);//存儲狀態(tài)conststate={userinfo:{username:'張三',age:20,token:'1001'}? ? ? ? ? ? ? ? }//將vuex暴露出去exportdefaultnewVuex.Store({? ? ? ? ? ? ? ? ? ? ? ? ? ? state? ? ? ? ? ? ? ? ? ? ? ? });? 第五步：在main.js中引入store，并在newVue中注冊//引入vueximportstorefrom'./store';newVue({? ? ? ? ? ? .......? ? ? ? ? ? ? store,? ? ? ? ? ? ? ........? ? ? ? ? ? }); 第六步：如何獲取和設(shè)置數(shù)據(jù)? 獲茸阍伞：在對應(yīng)組件的computed中處理? ? ? 即：this.$store.state來獲取 設(shè)置/修改數(shù)據(jù):通過commit到mutations來修改state如何提高vuex的使用體驗(yàn)：1.優(yōu)化state寫法import{matpState}from'vuex'
在計(jì)算屬性中添加下面的內(nèi)容：
computed:{//組件的計(jì)算屬性str() {return"hello"+this.msg? ? ? ? ? ? ? ? },//vuex的數(shù)據(jù)...mapState({? ? ? ? ? ? address:'address',? ? ? ? ? ? userinfo:'userinfo'})? ? ? ? ? ? }? ? }
2.優(yōu)化actions,mutations
import{ mapState,mapActions,mapMutations? }from'vuex';? ? ? ...mapActions(['gomodify','aa','bb']),? ? ? ...mapMutations(['setValue']),3.隔離vuex各部分，提高可維護(hù)性
