一. 引用
引入Vuex（前提是已經(jīng)用Vue腳手架工具構(gòu)建好項目）
1.安裝
npm install vuex --save
要注意的是這里一定要加上 –save，因為你這個包我們在生產(chǎn)環(huán)境中是要使用的钮糖。
2梅掠、新建一個store文件夾（這個不是必須的），并在文件夾下新建store.js文件藐鹤，文件中引入我們的vue和vuex瓤檐。
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store（{
。娱节。泉瞻。
}）
3、在main.js 中引入新建的vuex文件
import store from './store'
4败徊、再然后 , 在實例化 Vue對象時加入 store 對象 :
new Vue({
el: '#app',
store,//使用store
template: '<App/>',
components: { App }
})
二. Vue 理解
Vuex 使用 單一狀態(tài)樹,通俗理解就是一個應(yīng)用的數(shù)據(jù)集合智政，可以想象為一個“前端數(shù)據(jù)庫”，讓其在各個頁面上實現(xiàn)數(shù)據(jù)的共享稠歉，并且可操作
Vuex 規(guī)定掰担，屬于應(yīng)用層級的狀態(tài)只能通過 Mutation 中的方法來修改，而派發(fā) Mutation 中的事件只能通過 action怒炸。
從左到右带饱，從組件出發(fā)，組件中調(diào)用 action阅羹，在 action 這一層級我們可以和后臺數(shù)據(jù)交互勺疼，比如獲取初始化的數(shù)據(jù)源，或者中間數(shù)據(jù)的過濾等捏鱼。然后在 action 中去派發(fā) Mutation执庐。Mutation 去觸發(fā)狀態(tài)的改變，狀態(tài)的改變导梆，將觸發(fā)視圖的更新轨淌。
注意事項
數(shù)據(jù)流都是單向的
組件能夠調(diào)用 action
action 用來派發(fā) Mutation
只有 mutation 可以改變狀態(tài)
store 是響應(yīng)式的，無論 state 什么時候更新看尼，組件都將同步更新
三. 使用
1. State
在 store 中的 state 對象递鹉，可以理解為 Vue 實例中的 data 對象，它用來保存最基本的數(shù)據(jù)藏斩。
import Vue from 'Vue';
import Vuex from 'Vuex';
Vue.use(Vuex);
let store = new Vuex.Store({
state: {
stateA: 'a',
stateB: 'b',
stateC: 'c'
}
});
console.log(store.state.stateA); // a
在 Vue 中獲取 store 中的狀態(tài)
let app = new Vue({
el: '#demo',
template: `
{{myState}}
`,
computed: {
myState() {
return store.state.stateA;
}
}
});
2. Mutations
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation梳虽。
mutation中寫有修改數(shù)據(jù)的邏輯。
另外mutation里只能執(zhí)行同步操作灾茁。
mutations:{
getConfig(state){
let _this = this;
let payload = {
timestamp: 123123412414142,
principal: 1000
};
let cheaders = {
headers: {
appname:'walletandroid',
appversion:'3',
signature:'eced94b3244b16ed81d2517589baae7e90727382b7c56750cc517415583c8a5b'
}
};
Vue.http.post('http://apitest.wewallet.info/wallet/v1/roulette/123455/fsdfasdfa/config', JSON.stringify(payload), cheaders)
.then((response) => {
state.datalist = response.body.data;
console.log(state.datalist)
});
},
getTry(state){
let _this = this;
let payload = {
timestamp: 123123412414142,
principal: 1000
};
let cheaders = {
headers: {
appname:'walletandroid',
appversion:'3',
signature:'eced94b3244b16ed81d2517589baae7e90727382b7c56750cc517415583c8a5b'
}
};
Vue.http.post('http://apitest.wewallet.info/wallet/v1/roulette/123455/fsdfasdfa/try', JSON.stringify(payload), cheaders)
.then((response) => {
state.coins = response.body.data.coins;
})
},
},
想要改變狀態(tài)的時候都是用store.commit的方式
帶參數(shù)提交
created() {
this.$store.commit('change',item);
}
mutations：{
changeData(state,item){
state.data = item
}
}
在組件中提交 Mutations
你可以在組件中使用 this.$store.commit(‘xxx’) 提交 mutation窜觉，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點注入 store）谷炸。
created() { //vue created鉤子函數(shù)，在頁面加載時執(zhí)行
this.$store.dispatch('addCount')
},
3. Action
action,動作禀挫。
對于store中數(shù)據(jù)的修改操作動作在action中提交旬陡。
其實action和mutation類似，但是action提交是mutation语婴，并不直接修改數(shù)據(jù)描孟，而是觸發(fā)mutation修改數(shù)據(jù)。
actions:{
config({commit}){
commit('getConfig')
},
try({commit}){
commit('getTry')
}
},
示例
store的index.js文件
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store({
state:{
datalist:[],
coins:''
},
mutations:{
getConfig(state){
let _this = this;
let payload = {
timestamp: 123123412414142,
principal: 1000
};
let cheaders = {
headers: {
appname:'android',
appversion:'3',
signature:'eced94b3244b16ed81d2517cc517415583c8a5b'
}
};
Vue.http.post('http://apitestv1/roulette/123455/fsdfasdfa/config', JSON.stringify(payload), cheaders)
.then((response) => {
state.datalist = response.body.data;
console.log(state.datalist)
});
},
getTry(state){
let _this = this;
let payload = {
timestamp: 123123412414142,
principal: 1000
};
let cheaders = {
headers: {
appname:'walletandroid',
appversion:'3',
signature:'eced94b3244b16ec517415583c8a5b'
}
};
Vue.http.post('http://apitest/v1/roulette/123455/fsdfasdfa/try', JSON.stringify(payload), cheaders)
.then((response) => {
state.coins = response.body.data.coins;
})
},
},
actions:{
config({commit}){
commit('getConfig')
},
try({commit}){
commit('getTry')
}
},
})
組件
<template>
<div class="box">
<div>{{getList}}</div>
<div>{{getCoins}}</div>
</box>
</template>
computed:{
getList(){
return this.datalist = this.$store.state.datalist
},
getCoins(){
return this.coins = this.$store.state.coins
}
},
created() {
this.$store.dispatch('config');
this.$store.dispatch('try');
},
