VueX詳解

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式

什麼是狀態管理模式：

聽着雲裏霧裏，在實際的單頁面應用開發中，咱們常常會遇到組件之間通訊的問題，在我看來vuex完美的解決了這個問題（我的理解）

首先咱們來看看它的結構

這塊呢咱們也採用了模塊化的寫法：

首先store.js

它的主要做用是將定義的子模塊引入到store對象中，代碼以下：

import Vue from 'vue'
import Vuex from 'vuex'
import overRall from "./modules/overrall"
import puduct from "./modules/puduct.js"
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
overRall: overRall,
puduct: puduct
}
})

重點來了，來看看咱們的子模塊，首先上代碼：（puduct.js）

export default{
state:{
modal:{
name:"6666",
sid:"1",
groupid:"10",
orderid:"12",
lasttime:"1497919736"
},
isshow: false
},
mutations: {
setModal (state, modal){
state.modal.name = modal.name;
state.modal.sid = modal.sid;
state.modal.groupid = modal.groupid;
state.modal.orderid = modal.orderid;
state.modal.lasttime = modal.lasttime;
},
setShow (state, isShow){
state.isshow = isShow;
}
},
getters: {
getModal: state => {
return state.modal;
},
getIsShow: state => {
return state.isshow;
}
}

}

 

state:爲自定義的狀態，能夠是對象，也能夠是變量，視狀況而定；

mutations： 爲自定義外部設置state的接口；(至關於set)

getters：爲子模塊中獲取如今狀態的接口;(至關於get)

 

好，如今咱們的狀態管理的js已經準備好了，咱們看看怎麼用它，

首先在vue單頁面項目的主js中引入咱們的store.js,以下;

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store.js'

Vue.config.productionTip = false
Vue.http.options.xhr = { withCredentials: true }
Vue.http.options.emulateJSON = true;

/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: { App }
})

在建立vue對象的時候把咱們的store.js穿進去，到此全部的準備工做已經就緒，咱們一塊兒來見證它如何使用。

在vue的子模塊中，咱們不須要再去引入store.js了

直接可使用vue的$store對象，

咱們能夠直接使用this.$store就能夠獲取到咱們定義的store對象，這裏要注意在須要設置狀態的時候也就是以前說的mutations中的方法，是須要以固定格式this.$store.commit(方法名, 設置的值)

去進行操做的

對應的getters ;this.$store.getters.getAccount

到此關於vuex的一些經驗就說道這裏，但我總覺的vuex不止如此，但願你們多多指正