1.介紹vuex裡面的四大金剛:State，Mutations，Actions，Getters

(針對localStorage和這個用來儲存的區別，感興趣的可以搜一下）

1. State（state）

   1. Vuex使用單一狀態樹，用一個物件就包含了全部的應用層級狀態。至此它便作為一個“唯一資料來源(SSOT)”而存在。這也意味著，每個應用將僅僅包含一個store例項。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在除錯的過程中也能輕易地取得整個當前應用狀態的快照。簡單粗暴理解： 我們要把我們需要做狀態管理的量放到這裡來，然後在後面的操作它。

      //宣告一個state
      const state = {
        blogTitle: 'bolg標題',
        views: 10,
        blogNumber: 100,
       	total: 0,
        todos: [
          {id: 1, done: true, text: '待做事項1'},
          {id: 2, done: false, text: '待做事項2'},
          {id: 3, done: true, text: '待做事項3'},
        ]
      }
       
      

2. Mutation

   1. 我們有了state狀態樹，我們要改變它的狀態（值），就必須用vue指定唯一方法 mutation，官網說：更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字串的 事件型別 (type) 和 一個 回撥函式 (handler)。簡單粗暴理解：任何不以mutation的方式改變state的值，都是耍流氓（違法）

      //建立一個mutation
      const mutation = {
        addViews (state) {
          state.views++
        },
        blogAdd (state) {
          state.blogNumber++
        },
        clickTotal (state) {
          state.total++
        }
      }
       
      

3. Action

   1. action的作用跟mutation的作用是一致的，它提交mutation，從而改變state，是改變state的一個增強版，官網說：Action 類似於 mutation，不同在於：1. Action 提交的是 mutation，而不是直接變更狀態。2.Action 可以包含任意非同步操作。

      const actions = {
        addViews ({commit}) {
          commit('addViews')
        },
        clickTotal ({commit}) {
          commit('clickTotal')
        },
        blogAdd ({commit}) {
          commit('blogAdd')
        }
      }
       
      

4. Getter

   1. 官網說：有時候我們需要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數。減少我們對這些狀態資料的操作

      簡單粗暴理解：狀態樹上的資料比較複雜了，我們使用的時候要簡化操作，上面的state.todos 是一個物件，在元件中挑不同的資料時，需要對其做下處理，這樣每次需要一次就處理一次，我們簡化操作，將其在getter中處理好，然後export 一個方法；

      const getters = {
       	getToDo (state) {
       	return state.todos.filter(item => item.done === true)
       	// filter 迭代過濾器 將每個item的值 item.done == true 挑出來， 返回的是一個數組
       }
      }
      

2.使用

1. src下新建檔案 store.js
2. main.js中匯入檔案
3. 元件中使用
4. 具體看末尾的程式碼地址，git clone下來可立即

3.mapState, mapGetters, mapActions, mapMutations

對應四大金剛的一個輔助函式

1. mapState

   當一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性，讓你少按幾次鍵盤。對應官網:https://vuex.vuejs.org/zh-cn/state.html

   #例項程式碼
   #html
   <p>
     mapState方式{{viewsCount}};<br/>
     直接使用views{{this.$store.state.views}}
   </p>
   
   #js
   ...mapState({
   	viewsCount: 'views'
   })
   
   我們需要使用一個工具函式將多個物件合併為一個，這個 ... 方法就合適了，將多個函式方法合併成一個物件，並且將vuex中的this.$store.views 對映到this.viewsCount (this -> vue)上面來，這樣在多個狀態時可以避免重複使用，而且當對映的值和state 的狀態值是相等的時候，可以是直接使用
   ...mapState({
    'views'
    }),
   

2. mapMutations

   mapMutations其實跟mapState的作用是類似的,將元件中的methods對映為store.commit呼叫上面的程式碼:

   <span>{{this.$store.state.total}}</span>
   <p><button @click="totalAlise">點選增加total</button>
     
   ...mapMutations({
     totalAlise: 'clickTotal' // clickTotal 是mutation 裡的方法，totalAlise是重新定義的一個別名方法，本元件直接呼叫這個方法
   })
   

3. mapActions

   action的一個輔助函式，將元件的methods對映為store.dispatch呼叫

   <h4>blogNumber數字</h4>
   <span>state中blogNumber:{{this.$store.sate.blogNumber}}</span>
   
   created(){
    // this.$store.dispatch('blogAdd')
    // 直接通過store的方法 觸發action, 改變 views 的值
    this.blogAdd() // 通過mapActions 觸發mutation 從而commit ，改變state的值
   }
   
   ...mapActions({
     blogAdd: 'blogAdd' // blogAdd是定義的一個函式別名稱，掛載在到this(vue)例項上，blogAdd 才是actions裡面函式方法名稱 
   })
   

4. mapGetter

   僅僅是將store中的getter對映到區域性計算屬性

   <h5>todos裡面的資訊</h5>
   	<ul>
       <li v-for="item in todosAlise" :key="item.id">
       //<li v-for="item in this.$store.state.todos" :key="item.id"> 這裡就是直接讀取store的值，沒有做過濾操作，如果需要過濾。
         <span>{{item.text}}</span><br/>
         <span>{{item.done}}</span>
       </li>
   	</ul>
   </h5>
   
   ...mapGetters({
   	todosALise: 'getToDo' // getToDo 不是字串，對應的是getter裡面的一個方法名字 然後將這個方法名字重新取一個別名 todosALise
   })
   
   //這個 getToDo 是在getters 定義的一個方法，它將todos 裡的物件屬性done為true的之過濾出來
   getToDo(state) {
     return state.todos.filter(item => item.done === true)
     //filter迭代過濾器 將每個item的值 item.done == true 挑出來，返回的是一個數組
   }
   

參考：

1. https://www.php.cn/js-tutorial-394694.html
2. https://vuex.vuejs.org/zh/guide/state.html#在-vue-元件中獲得-vuex-狀態
3. 程式碼地址：https://gitee.com/ashscc/vue-ptn