vueX

2. Vuex：是一個集中式狀態管理工具，至關於react中的 redux

   1） 主要解決的問題：大中型項目中複雜組件通信問題
   
   
     2）  vuex操做流程：
   
                dispatch                   commit

   vue組件---------------->actions------------>mutations------->state-------->vue組件更新

3）vuex的重要概念： state:要保存的狀態 mutations:是最終改變狀態的方法集，mutations中的代碼是同步執行的 actions: 4）使用步驟： 第一步：先安裝vuex npm install vuex --save 第二步：在src建立一個store目錄，用來存放vuex相關文件 第三步：在store目錄先建立一個index.js文件，作爲vuex入口文件 第四步：在store目錄的index.js中，寫入下面的內容 //引入vuex，vue import Vuex from 'vuex'; import Vue from 'vue'; //讓vue識別vuex Vue.use(Vuex); //存儲狀態 const state={ userinfo:{ username:'張三', age:20, token:'1001' } } //將vuex暴露出去 export default new Vuex.Store({ state }); 第五步：在main.js中引入store，並在new Vue中註冊 //引入vuex import store from './store'; new Vue({ ....... store, ........ }); 第六步：如何獲取和設置數據 獲取：在對應組件的computed中處理 即： this.$store.state來獲取 設置/修改數據:經過commit到mutations來修改state 如何提升vuex的使用體驗： 1.優化state寫法 import {matpState} from 'vuex' 

在計算屬性中添加下面的內容：

computed:{
          //組件的計算屬性 str() { return "hello"+this.msg }, //vuex的數據 ...mapState({ address:'address', userinfo:'userinfo' }) } } 

2.優化actions,mutations

import { mapState,mapActions,mapMutations } from 'vuex'; ...mapActions(['gomodify','aa','bb']), ...mapMutations(['setValue']), 3.隔離vuex各部分，提升可維護性