我的理解

• 個人認為，不用說得太過深奧，vuex其實就是把一個應用的某些數據統一管理起來，以便其他的組件更方便的操作該數據。

  為什麽使用vuex

• 當項目結構越來越復雜，組件的多層嵌套使得數據傳遞非常繁瑣，並且難以維護，有了vuex，我們可以把一些數據的狀態統一管理起來，通過調用vuex暴漏出來的API,就可以簡單方便操作數據。非常方便。

  基本使用

• 安裝

    npm install vuex --save

• 創建store實例
  • 我們在我們的項目 創建 一個 store.js 文件，註意在模塊化構建系統中，需要調用 Vue.use(Vuex)，通過在根實例 vm(new Vue({ store }
    )註冊 store，這樣根組件的所有子組件都可以$store.state.xxx訪問state的數據了。

    //這裏我引入vue 直接指定了路徑  方法不唯一，只要能引入vue即可
    import Vue from '../../node_modules/vue/dist/vue.js'
    //引入vuex
    import Vuex from 'vuex'
    //調用 Vue.use()
    Vue.use(Vuex)
    //創建store實例
    const store = new Vuex.Store({
        name: "車神-黃傑"
    })
    //導出 store對象
    export default store
 

• main.js文件

   import Vue from '../..//node_modules/vue/dist/vue.js'
   import App from './App.vue'
   import store from './store.js'

   //創建vm實例
   const vm = new Vue({
       el: '#app',
        render(c){
            return c(App)
        },
        //在 vm註冊store
        store
    }）
 

• state
  • state就相當於 vue的data，就是定義一些公共的數據，這裏的數據每一個組件都可以訪問，此時在組件中 可以通過 $store.state.xxxx得到該數據。

    //App組件
    <template>
        <h2>{{name}}</h2>
    </template>
    <script>
    export default {
        data(){
            return {}
        },
        computed(){
            name(){
                return this.$store.state.name
            }
        }
    }
    </script>
    <style lang="less" scoped></style>

mapState

• 不通過計算屬性返回狀態得到數據的方式，直接通過 $store.state.xxx也可以獲得數據，只不過當一個組件多處都用到該數據，這樣代碼就會顯得很臃腫，而通過計算屬性定義每一個數據也很不方便，因此官方提供 mapState函數來幫助我們更方便的把狀態映射成為組件的計算屬性。沒啥好測試的，直接用官網的例子，有以下幾種方式：

• 傳入對象

    // 在單獨構建的版本中輔助函數為 Vuex.mapState
    import { mapState } from 'vuex'

    export default {
      computed: mapState({
        // 箭頭函數可使代碼更簡練
        count: state => state.count,

        // 傳字符串參數 'count' 等同於 `state => state.count`
        countAlias: 'count',

        // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      })
    }

• 此時計算屬性和state的節點名稱相同 此時傳入一個數組，裏面即為state數據名稱字符串

    computed: mapState([
      // 映射 this.count 為 store.state.count
      'count'
    ])

• 當我們想要和局部的計算屬性一起使用，使用對象展開運算符...

    computed: {
      localComputed () { /* ... */ },
      // 使用對象展開運算符將此對象混入到外部對象中
      ...mapState({
            //這裏的寫法與傳入對象的寫法一致
      }),
     ...mapState([
            //這裏的寫法與傳入數組的寫法一致
          ])
       }

註意

• 要想 通過this獲取局部狀態，只能使用常規函數，不能使用箭頭函數，我測試了一下，箭頭函數中的this為undefined。具體原因是箭頭函數this指向問題。有興趣可以去了解一下。

vuex之state(一)