Vuex 升級入坑小記

Vuex 升級入坑小記

場景描述

引入Vuex的版本爲0.3，開啓調試工具默認升級後能夠調試Vuex。給做者一個大大的贊。爲提升開發體驗也是操碎了心 (๑•̀ㅂ•́)و✧ (8。安利下(Vue Devtools）。

Vue Devtools 只支持了v0.5＋。遂升級Vuex，發現大量Vuex使用失效，報vuex actions undefined，Vuex的中文文檔，沒有及時更新。英文文檔Api的改動已經同步文檔。

關於Vuex 接口升級的說明 https://github.com/vuejs/vuex/issues/54

升級

升級Vuex之後的寫法和route的方式相似

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'
import MyComponent from './MyComponent'

// important, teaches Vue components how to
// handle Vuex-related options
Vue.use(Vuex)

var app = new Vue({
    el: '#app',
    // provide the store using the "store" option.
    // this will inject the store instance to all child components.
    store,
    components: {
       MyComponent
    }
});

應用store數據的方式：

export default {
    computed: {
        data () {
             return this.$store.state.data
           }
    },
      methods {
          doSomething () {
              ...
              this.$store.dispatch('MUTATIONS', arguments);
              ...
        }
    }
};

升級後的直觀感覺，this.$store的方式取值 和 調用actions更方便了。

Vuex改善開發體驗之處

引入Vue-route Vue纔算正兒八經開發SPA了。Vue-route 的使命是不斷切換，組件樹。雖然子組件能夠複用，可是不能共享數據，View切換父組件的生命週期結束，隨之子組件的生命週期結束。子組件的數據隨之清空。在特定場景須要一些數據持久化。官方給了一些例子 https://github.com/vuejs/vuex/tree/master/examples

個人項目中適合用Vuex的地方：1持久化用戶信息。2機票訂單和用戶信息。