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机票定单和用户信息。