基礎(chǔ)入門文檔建議直接查看vuex中文文檔
vuex中文文檔

我的理解：在 Vue.js 的項目中，如果項目結(jié)構(gòu)簡單， 父子組件之間的數(shù)據(jù)傳遞可以使用 props 或者 $emit 等方式，當(dāng)需要子組件和子組件之間傳遞數(shù)據(jù)數(shù)據(jù)，往往比較麻煩，Vue 沒有直接子對子傳參的方法，建議將需要傳遞數(shù)據(jù)的子組件，都合并為一個組件。如果一定需要子對子傳參，可以先從傳到父組件，再傳到子組件。為了便于開發(fā)，Vue 推出了一個狀態(tài)管理工具 Vuex，可以很方便實現(xiàn)組件之間的參數(shù)傳遞Vue 推出了一個[狀態(tài)管理工具 Vuex，可以很方便實現(xiàn)組件之間的參數(shù)傳遞。

一、Vuex的安裝

首先使用npm安裝

npm install vuex --save

然后在main.js中調(diào)用

import Vue from 'vue'
import Vuex from 'vuex'
Vue use(Vuex)
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

二、構(gòu)建核心倉庫store.js

Vuex 應(yīng)用的狀態(tài) state 都應(yīng)當(dāng)存放在 store.js 里面，Vue 組件可以從 store.js 里面獲取狀態(tài)，可以把 store 通俗的理解為一個全局變量的倉庫。但是和單純的全局變量又有一些區(qū)別，主要體現(xiàn)在當(dāng) store 中的狀態(tài)發(fā)生改變時，相應(yīng)的 vue 組件也會得到高效更新。

在src目錄下新建一個store目錄，將index.js放在store目錄下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    //定義狀態(tài)
    state:{
        author:'mirs chen'
    },
    //計算屬性
    getters:{

    },
    //修改狀態(tài)事件，必須同步函數(shù)
    mutations:{
        newAuthor (state, msg) {
            state.author = msg;
        }
    },
    //提交 mutation，可以異步操作
    actions:{

    },
    //模塊
    modules:{

    }
})

export default store

這是一個最簡單的store結(jié)構(gòu)，里面只存放了一個狀態(tài)author，在mutations寫了一個事件，用于修改狀態(tài)，后面會用到。
雖然在 main.js 中已經(jīng)引入了 Vue 和 Vuex，但是這里還得再引入一次

三、將狀態(tài)映射到組件中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    {{author}}
    <div @click="change">點擊</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed:{
    author(){
      return this.$store.state.author;
    }
  },
  methods:{
    change(){
      this.$store.commit('newAuthor','hahha');
    }
  }
}
</script>

這個一個新建的組件，在computed中，寫author方式，用來讀取store中存放的狀態(tài)，讀取方式this.$store.state.author，并將讀取到的值顯示在頁面中。

四、組件中修改狀態(tài)

官方推薦寫法
在上面代碼中，我在methods中寫了change方法用來改變狀態(tài)
首先store.js中定義修改方法newAuthor ，其中第一個參數(shù)就是$store.state，第二個參數(shù)msg需要外部傳入

newAuthor (state, msg) {
   state.author = msg;
}

第二步在組件的methods中添加change方法調(diào)用 store.commit 方法,其中第一個參數(shù)狀態(tài)事件的方法，第二個參數(shù)是外部傳入的msg

change(){
    this.$store.commit('newAuthor','hahha');
}

這樣就可以顯示的修改store的狀態(tài)

簡單寫法
不需要再store中寫好修改狀態(tài)的方法，直接在組件中修改

methods:{
    change(){
      this.$store.state.author = 'hahha';
     // this.$store.commit('newAuthor','hahha');
    }
}

這種方式在嚴(yán)格模式下會報警告，而且在大型項目中很難維護，所以不推薦使用。

問題

1. vuex中 state，getters，mutations，actions各表示什么？
   在官網(wǎng)中有詳細(xì)介紹，我的理解是：
   state：保存的是狀態(tài)，相當(dāng)于全局變量的倉庫，可以在組件中調(diào)用，也可以修改。
   getters：state 中派生出一些狀態(tài)，例如對列表進(jìn)行過濾并計數(shù)，可以在getters中設(shè)置計算屬性的方法，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計算。也可以被組件調(diào)用，調(diào)用方法：this.$store.getters.方法名
   mutations：用來寫修改狀態(tài)的事件，供外部調(diào)用，mutation 都是同步事務(wù)
   actions：由mutations不能完成的異步操作方法，可以寫在actions里面

2.使用vuex 報錯requires a Promise polyfill in this browser
造成這種現(xiàn)象的原因歸根究底就是瀏覽器對ES6中的promise無法支持，因此需要通過引入babel-polyfill來是我們的瀏覽器正常使用es6的功能
安裝babel-polyfill npm install babel-polyfill --save-dev
調(diào)用 import "babel-polyfill"

3.vuex數(shù)據(jù)持久化，vuex-persist
安裝vuex-persist
npm install -S vuex-persist
在store文件中引用

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import VuexPersist from 'vuex-persist'
const vuexLocal = new VuexPersist({
    storage:window.sessionStorage
});

const store = new Vuex.Store({
    plugins:[vuexLocal.plugin]
})

export default store