目的：
1、了解vuex中的各個js文件的用途
2、利用vuex存值
3、利用vuex取值
4、Vuex的異步同步加載問題
1. vuex中各個組件之間傳值
1.父子組件
父組件-->子組件，通過子組件的自定義屬性：props
子組件-->父組件，通過自定義事件：this.$emit('事件名',參數1,參數2,...);
2.非父子組件或父子組件
通過數據總數Bus，this.$root.$emit('事件名',參數1,參數2,...)
3.非父子組件或父子組件
更好的方式是在vue中使用vuex
方法1: 用組件之間通訊。這樣寫很麻煩，很容易寫暈。
方法2: 我們定義全局變量。模塊a的數據賦值給全局變量x。然后模塊b獲取x。這樣我們就很容易獲取到數據
2. Vuex
Vuex是Vue.js應用程序的狀態管理模式+庫。它充當應用程序中所有組件的集中存儲，其規則確保狀態只能以可預測的方式進行變更。
Vuex分成五個部分：
State：單一狀態樹
Getters：狀態獲取
Mutations：觸發同步事件
Actions：提交mutation，可以包含異步操作
Module：將vuex進行分模塊
圖解：
官方詳解（https://vuex.vuejs.org/）
3. vuex使用步驟
3.1 安裝
npm install vuex -S
3.2 創建store模塊，分別維護state/actions/mutations/getters
store
index.js
state.js
actions.js
mutations.js
getters.js
3.3 在store/index.js文件中新建vuex的store實例，並注冊上面引入的各大模塊
除了index.js以外其他四個js文件都需要引入下面這個模塊
index.js
import Vue from 'vue' import Vuex from 'vuex' import state from './state' import getters from './getters' import actions from './actions' import mutations from './mutations' Vue.use(Vuex) const store = new Vuex.Store({ state, getters, actions, mutations }) export default store
3.4 在main.js中導入並使用store實例
main.js
import store from './store'
new Vue({ el: '#app', router, store, //在main.js中導入store實例
components: { App }, template: '<App/>', data: { //自定義的事件總線對象，用於父子組件的通信
Bus: new Vue() } })
4.vuex的核心概念：store、state、getters、mutations、actions
store： 每一個Vuex應用的核心就是store(倉庫),store基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。
state ： 共同維護的一個狀態，state里面可以是很多個全局狀態
getters：獲取數據並渲染
actions：數據的異步操作
mutations：處理數據的唯一途徑，state的改變或賦值只能在這里
圖解：
4.1 state(保存數據的容器)
狀態，即要全局讀寫的數據
state.js
export default{ //定義變量，名字自定義 htname:'世人皆憐李清照，無人惜我魚玄機', hhname:'本是青燈不歸客，卻因濁酒留風塵', }
讀取：
VuexPage1.vue
<template>
<div>
<h2>第一個vuex頁面:</h2>
<h3>{{ht}}</h3>
</div>
</template>
<script>
export default{
data(){
return{
};
},
computed: {
ht() {
return this.$store.state.htname; //不推薦這種方式
}
},
}
</script>
效果：
還有一種方式獲取值
VuexPage2.vue
<template>
<div>
<h2>第二個vuex頁面:</h2>
<h3>{{ht}}</h3>
</div>
</template>
<script>
export default{
data(){
return{
ht:''
};
},
//使用鈎子函數
created(){
this.ht=this.$store.state.hhname;
},
}
</script>
效果：
4.2 getters(getXxx)
獲取數據並渲染
注1：getters將state中定義的值暴露在this.$store.getters對象中，我們可以通過如下代碼訪問
this.$store.getters.name
注2：state狀態存儲是響應式的，從store實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態
4.3 mutations(setXxx)
處理數據的唯一途徑，state的改變或賦值只能在這里
注1：mutations中方法的調用方式
不能直接調用this.$store.mutations.setResturantName('KFC')，必須使用如下方式調用：
this.$store.commit(type,payload);// 1、把載荷和type分開提交
store.commit('setResturantName',{
resturantName:'KFC'
})// 2、載荷和type寫到一起
store.commit({
type: 'setResturantName',resturantName: 'KFC'})
注2：一定要記住，Mutation 必須是同步函數。為什么呢？異步方法，我們不知道什么時候狀態會發生改變，所以也就無法追蹤了
如果我們需要異步操作，Mutations就不能滿足我們需求了，這時候我們就需要Actions了
4.4 actions
數據的異步(async)操作
sethtnameAsync: (context, payload) => { console.log('啦啦啦'); setTimeout(() => { console.log('哈哈哈'); context.commit('sethtname', payload); }, 3000); console.log('略略略'); },
vuex綜合完整案例
定義變量 state.js
export default{
//定義變量，名字自定義
htname:'世人皆憐李清照，無人惜我魚玄機', //后面基本上用的是這個變量
hhname:'本是青燈不歸客，卻因濁酒留風塵',
}
顯示頁面VuePage1.vue
<template>
<div>
<h2>第一個vuex頁面:</h2>
<h3>{{ht}}</h3>
<button @click="hscht">換詩詞</button>
<button @click="hschtAsync">一個月后換詩詞</button>
<button @click="doAjax">測試vuex中使用ajax</button>
</div>
</template>
<script> export default{ data(){ return{ }; }, methods: { hscht() { this.$store.commit('sethtname',{ htname:'一身詩意千尋普，萬古人間四月天', }); }, hschtAsync() { this.$store.dispatch('sethtnameAsync',{ htname:'世事一場大夢，人生幾度秋涼', }); }, doAjax(){ this.$store.dispatch('doAjax',{ _this:this, }); } }, computed: { ht() { // return this.$store.state.htname; //不推薦這種方式
return this.$store.getters.gethtname; } }, } </script>
<style>
</style>
getters.js 獲取數據並且渲染
export default{
gethtname: (state) => {
return state.htname;
}
}
效果：
mutations.js
export default {
sethtname: (state, payload) => {
state.htname = payload.htname;
},
}
效果就是點擊換詩詞就會換成別的詩詞
==》點擊換詩詞
現在我們來用Action來代替mutations
export default {
sethtnameAsync: (context, payload) => {
console.log('啦啦啦');
setTimeout(() => {
console.log('哈哈哈');
context.commit('sethtname', payload);
}, 3000);
console.log('略略略');
},
doAjax:(context, payload) => {
//vuex是不能被vue實例的
let _this =payload._this;
let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
// let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
console.log(url);
_this.axios.post(url,{}).then((response) => {
console.log('doAjax............');
console.log(response);
}).catch((response)=>{
console.log(response);
});
},
}
效果是：我給它設定了三秒鍾，所以三秒鍾后它自動換詩詞（為了展示效果就輸出在控制台看是否成功），並且參加了異步玩法
謝謝觀看！