vuex-基礎以及輔助函數的用法

1.vuex爲何會出現，解決了什麼問題？

組件之間的參數傳遞有父子之間的傳值，兄弟之間的傳值，祖先和孫子之間的傳值在層級較少的時候比較方便使用。 可是層級數較多，嵌套較麻煩時，使用起來就會相對的繁瑣且很差維護 所以想到了vuex，將組件的共享狀態抽取出來，以一個全局單例模式進行管理。組件樹則造成了一個巨大的」視圖「。 無論樹的哪一個位置，任何組件都能獲取狀態或者觸發行爲。

2.何時使用Vuex？

簡單小型的項目沒有必要使用，若是是中大型單頁應用，即可以去使用。

3.Vuex的核心？

每個 Vuex 應用的核心就是 store（倉庫）。「store」基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)

特色： 1.Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。

2.你不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。

4.Vuex的基礎用法？

創建store文件夾並建立index.js, 記得去main.js文件進行一下調用。大體index.js主要爲（後面將會分部解析）：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
   state:{
       userName: 'phoebe',
       age: '23',
       habit: 'dance'
   },
   //主要是爲了修改state
   mutations: {
       getUserName (state,value) {
           state.userName = value
       }
   },
   // action就是爲了提交mutation
   actions: {
       getUserName (context,value) {
           context.commit('getUserName',value)
       }
   }
})

export default store
複製代碼

簡單實如今store中存入一部分屬性，而後部分組件去調用它。（單純的取）

//store/index.js
 state:{
        userName: 'phoebe',
        age: '23',
        habit: 'dance'
    }
        
  // app.vue
  
  // 1.簡單獲取
  this.$store.state.age
  this.$store.state.habit
  this.$store.state.userName
  
  //2.使用輔助函數 mapState
  import { mapState } from 'vuex'
  computed: {
      //this.habit :dance  便可調用
    ...mapState(['habit','age'.'userName'])
  },
複製代碼

修改state屬性的幾種方法？

1.commit mutations

// store/index.js
    mutations: {
        getUserName (state,value) {
            state.userName = value
        }
    },
    
    // app.vue
    
    // 1.簡單commit
    this.$store.commit('getUserName','phoebe')
    
    // 2.使用輔助函數 mapMutations將組件中的 methods 映射爲 store.commit 調用
    import {mapMutations} from 'vuex'
    methods： {
      ...mapMutations(['getUserName']), 
      init () {
        //this.$store.state.userName：'change phoebe to MM' 便可改變
        this.getUserName('change phoebe to MM')  
      }
    }
複製代碼

2.使用action

// store/index.js
   mutations: {
        getUserName (state,value) {
            state.userName = value
        }
    },
    // action就是爲了提交mutation
    actions: {
        getUserName (context,value) {
            context.commit('getUserName',value)
        }
    }
    
    // app.vue
    
    //1. 簡單分發
    this.$store.dispatch('getUserName', 'change name by action')
    
    //2.使用 mapActions 輔助函數將組件的 methods 映射爲 store.dispatch 調用
    import { mapActions} from 'vuex'
    methods: {
       ...mapActions(['getUserName']), 
    }
    init (){
      //this.$store.state.userName：'change phoebe to MA' 便可改變
      this.getUserName('change phoebe by MA') 
    }

複製代碼

先總結這些，後面持續再更~