场景描述
引入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机票订单和用户信息。
