以下是Vuex全局狀態管理，數據共享具體操作：
官網：https://vuex.vuejs.org/zh/installation.html
<!-- 以下是調用(獲取/設置)共享數據的頁面：01.vue -->
<template>
<div>
<h3>
Vuex全局狀態管理，數據共享:
1，可以查看vuex官網：https://vuex.vuejs.org/zh/installation.html
2，引入vuex有兩種方式：
a,直接下載保存vuex.js
b,(如果使用cnpm，所以下面也要使用cnpm)在項目名稱下一級安裝vuex：
安裝： cnpm install vuex --save
卸載： cnpm uninstall vuex
3，所有插件的使用都是在src/main.js中進行導入的。包括：插件vue.js,vuex.js,App,router等。
打開src/main.js 導入如： import store from './store'，並且需要在main.js中的
new Vue實例中添加：store。如下：
new Vue({
el: '#app',
router,
store,//引用vuex倉庫：store
components: { App },
template: '<App/>'
})
4， 在src目錄下創建stroe文件夾，以及在store里面創建index.js文件：
src/store/index.js文件中進行配置，如下：
import Vue from 'vue' //調用 vue 這里可以分號，也可以不添加分號
import Vuex from 'vuex'; //調用 vuex 插件 這里可以分號，也可以不添加分號
Vue.use(Vuex) //全局調用Vuex，這里千萬不能添加分號
export default new Vuex.Store({ //實例化vuex倉庫
/*store運行機制：
通過actions觸發mutations(類似事件)，進而修改具體倉庫狀態state(store.state.count)
Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。*/
state:{//共享數據池，聲明公共數據，即狀態
count:0,
num:1,
},
mutations:{//用於處理公共數據
increment(state,num){
state.count++;
state.num = num;
}
},
actions:{//把數據處理委托給mutations對象的increment方法
inc({commit},obj){ //唯一方法：使用 store.commit 方法觸發狀態變更
commit('increment',obj);
}
}
})
5，在需要調用共享數據的頁面進行數據調用和修改：
獲取共享數據：this.$store.state.count;
修改共享數據：this.$store.dispatch('inc',形參/實參);
/*store運行機制：actions --> mutations --> state 所以在修改共享數據時，
是直接調用actions中的指定函數，所以這里的'inc'函數明一定要存在。*/
</h3>
<div>{{count}}</div>
<input type="button" name="" value="修改共享數據num" @click="setNum"><br/>
<input type="button" name="" value="獲取共享數據num" @click="getNum"><br/>
<input type="button" name="" value="獲取共享數據count" @click="getCount"><br/>
<div>=========================================</div>
<input type="button" name="" value="修改共享數據love" @click="setLove"><br/>
<input type="button" name="" value="獲取共享數據love" @click="getLove"><br/>
<input type="button" name="" value="獲取共享數據a" @click="getA"><br/>
</div>
</template>
<script>
export default{
data(){
return{
count:0,
love:'I Love You Forever!',
}
},
methods:{
setNum(){
this.$store.dispatch('inc',this.love);//修改共享數據num
//狀態修改一定是在mutations中，一定不能在調用的頁面之中
// this.$store.state.count++;
},
getNum(){
console.log(this.$store.state.num);
},getCount(){
console.log(this.$store.state.count);
},
setLove(){
this.$store.dispatch('str','I want to fuck you fuck you!');
//狀態修改一定是在mutations中，一定不能在調用的頁面之中
// this.$store.state.a++;
},
getLove(){
console.log(this.$store.state.love);
},
getA(){
console.log(this.$store.state.a);
}
}
}
</script>
// 以下是src/store/index.js頁面的配置
import Vue from 'vue' //調用 vue 這里可以分號，也可以不添加分號
import Vuex from 'vuex'; //調用 vuex 插件 這里可以分號，也可以不添加分號
Vue.use(Vuex) //全局調用Vuex，這里千萬不能添加分號
export default new Vuex.Store({ //實例化vuex倉庫
/*store運行機制：
通過store.commit方法---觸發---》store.state狀態變更---》
Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。*/
state:{//共享數據池，聲明公共數據，即倉庫狀態
count:0,
num:1,
a:0,
love:'i love you',
},
mutations:{//用於處理公共數據，mutation 英 /mjuːˈteɪʃn/ 突變
increment(state,num){
state.count++;//狀態修改一定是在mutations中，一定不能在調用的頁面之中
state.num = num;
},
strings(state,str){
this.state.love=str;
this.state.a++;//狀態修改一定是在mutations中，一定不能在調用的頁面之中
}
},
actions:{//把數據處理委托給mutations對象的increment方法
inc({commit},obj){
commit('increment',obj);
},
str({commit},str){
commit('strings',str)
}
}
})
