場(chǎng)景描述
引入Vuex的版本為0.3昧碉，開(kāi)啟調(diào)試工具默認(rèn)升級(jí)后可以調(diào)試Vuex。給作者一個(gè)大大的贊。為提高開(kāi)發(fā)體驗(yàn)也是操碎了心 (??????)?? (8休建。安利下(Vue Devtools）碉渡。
Vue Devtools 只支持了v0.5＋聚谁。遂升級(jí)Vuex，發(fā)現(xiàn)大量Vuex使用失效滞诺，報(bào)vuex actions undefined形导，Vuex的中文文檔环疼，沒(méi)有及時(shí)更新。英文文檔Api的改動(dòng)已經(jīng)同步文檔朵耕。
關(guān)于Vuex 接口升級(jí)的說(shuō)明 https://github.com/vuejs/vuex/issues/54
升級(jí)
升級(jí)Vuex以后的寫(xiě)法和route的方式類(lèi)似
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
}
});
應(yīng)用store數(shù)據(jù)的方式：
export default {
computed: {
data () {
return this.$store.state.data
}
},
methods {
doSomething () {
...
this.$store.dispatch('MUTATIONS', arguments);
...
}
}
};
升級(jí)后的直觀感受炫隶，this.$store的方式取值 和 調(diào)用actions更方便了。
Vuex改善開(kāi)發(fā)體驗(yàn)之處
引入Vue-route Vue才算正兒八經(jīng)開(kāi)發(fā)SPA了阎曹。Vue-route 的使命是不斷切換伪阶，組件樹(shù)。雖然子組件可以復(fù)用处嫌，但是不能共享數(shù)據(jù)望门，View切換父組件的生命周期結(jié)束，隨之子組件的生命周期結(jié)束锰霜。子組件的數(shù)據(jù)隨之清空筹误。在特定場(chǎng)景需要一些數(shù)據(jù)持久化。官方給了一些例子 https://github.com/vuejs/vuex/tree/master/examples
我的項(xiàng)目中適合用Vuex的地方：1持久化用戶(hù)信息癣缅。2機(jī)票訂單和用戶(hù)信息厨剪。
