vuex中的store(state, mapState等)用法

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