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