首先在你的項目中安裝vuex
使用：
npm install vuex --save
然後在你的src文件夾下新建store文件夾，在裏面新建一個index.js文件，然後在裏面添加如下：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
export default store;
然後在main.js當中引入在index.js文件當中創建的store對象，並在Vue實例中添加：
import store from './store'//引入store
new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})
然後就可以來寫我們的vuex中的數據了，我們需要保存的數據就寫在store/index.js中的state裏，可以在其他頁面通過 this.$store.state來獲取我們定義的數據，接下來我先模擬一些數據；
//index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
//需要保存的數據寫在這裏
isLogin: false,
yhid:""
},
getters: {
//Getter相當於vue中的computed計算屬性，getter 的返回值會根據它的依賴被緩存起來，
//且只有當它的依賴值發生了改變纔會被重新計算，這裏我們可以通過定義vuex的Getter來獲取，
//Getters 可以用於監聽、state中的值的變化，返回計算後的結果
isLogin: state => state.isLogin,
yhid: state => state.yhid,
},
mutations: {
//相當於methods,在這裏面定義函數；
userStatus(state, flag) {
state.isLogin = flag
},
yhid(state,aa){
state.yhid = aa
}
},
// 應用mutations,在actions中提交從頁面傳過來的mutation再去修改狀態值
actions: {
userLogin({commit}, flag) {
commit("userStatus", flag)
},
yh({commit},aa){
commit("yhid",aa)
}
}
})
export default store
這裏先不用管能不能看懂，你只要知道state裏面的數據就是你要保存在全局裏面的就行了。下面在其他頁面獲取一下state裏面的數據。
<template>
<div class="hello">
<div>{{msg}}</div>
//輸出state裏面的數據
<div>{{$store.state.isLogin}}</div>
<div>yhid:{{$store.state.yhid}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
輸出後頁面如下，可以看到輸出結果和state裏面的狀態一樣。
既然可以輸出了，下面我們做的就是怎麼在普通頁面來設置和修改state裏面的數據了。
<template>
<div class="hello">
<div>{{msg}}</div>
<button @click="userLogin">點擊改變userLogin:{{$store.state.isLogin}}</button>
<button @click="yh">點擊改變yhid:{{$store.state.yhid}}</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
userLogin(){
this.$store.dispatch("userLogin",true)
},
yh(){
this.$store.dispatch("yh",77)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
點擊按鈕後效果如圖所示：
這樣就完成了。
解釋一下store裏面的其他內容的作用
dispatch：操作行爲觸發方法，是唯一能執行action的方法。通過他在普通頁面調用store裏面的action裏面的方法。
actions：操作行爲處理模塊。負責處理Vue Components接收到的所有交互行爲。包含同步/異步操作，支持多個同名方法，按照註冊的順序依次觸發。向後臺API請求的操作就在這個模塊中進行，包括觸發其他action以及提交mutation的操作。該模塊提供了Promise的封裝，以支持action的鏈式觸發。
commit：狀態改變提交操作方法。對mutation進行提交，是唯一能執行mutation的方法。
mutations：狀態改變操作方法。是Vuex修改state的唯一推薦方法，其他修改方式在嚴格模式下將會報錯。該方法只能進行同步操作，且方法名只能全局唯一。操作之中會有一些hook暴露出來，以進行state的監控等。
state：頁面狀態管理容器對象。集中存儲Vue components中data對象的零散數據，全局唯一，以進行統一的狀態管理。頁面顯示所需的數據從該對象中進行讀取，利用Vue的細粒度數據響應機制來進行高效的狀態更新。
getters：state對象讀取方法。圖中沒有單獨列出該模塊，應該被包含在了render中，Vue Components通過該方法讀取全局state對象。
明白了這些還有最後一步；
如果我們不喜歡這種在頁面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”這種很長的寫法，那麼我們可以使用mapState、mapGetters、mapActions就不會這麼麻煩了；
<template>
<div class="hello">
<div>{{msg}}</div>
<button @click="userLogin('true')">點擊改變userLogin:{{$store.state.isLogin}}</button>
<button @click="yh('22')">點擊改變yhid:{{$store.state.yhid}}</button>
<h3>{{yhid}}</h3>
</div>
</template>
<script>
import {mapState,mapActions,mapGetters} from 'vuex'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
computed:{
...mapState([
'yhid'
])
},
methods:{
// userLogin(){
// this.$store.dispatch("userLogin",true)
// },
// yh(){
// this.$store.dispatch("yh",77)
// },
...mapActions([
'userLogin',
'yh'
]),
}
}
</script>
<style scoped>
</style>
效果如下：
這就是全部的vuex的用法了。