相信昨天介紹完了 Vuex 後還是會有很多人不知道該如何使用,今天就用實際範例來介紹 Vuex 究竟該如何使用,直接看下面的範例吧!
首先,先用 npm 來安裝 Vuex。
npm install vuex --save
再來要在 main.js 啟用 Vuex,並且先 import 我們等一下會建立的 store 資料夾。
//src/main.js
import Vue from "vue";
import Vuex from 'vuex';
import App from "./App";
import store from './store';
Vue.use(Vuex);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: "#app",
components: { App },
template: "<App/>",
store
});
然後我們再到 src 底下建立 store 的資料夾,並在裡面建立 index.js 的檔案,並在裡面先做基本的配置。
//src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
})
到目前為止,基本配置已經差不多了,接下來就來實做一個計數器。
//src/components/HelloWorld.vue
<template>
<div class="hello">
<p>{{count}}</p>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
counting: 10
};
},
computed: {
count() {
return this.$store.state.count
}
},
};
</script>
//src/store/index.js
export default new Vuex.Store({
state: {
count: 1
},
})
這時就可以正確顯示預設的數字在頁面上囉!
再來我們可以新增一個按鈕,但在事件的處理上會和原本元件的方式不太一樣。
//src/components/HelloWorld.vue
<template>
<div class="hello">
<p>{{count}}</p>
<button @click="increase">Click Me</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
counting: 10
};
},
computed: {
count() {
return this.$store.state.count
}
},
methods: {
increase() {
this.$store.dispatch('incrementCount', this.counting)
}
}
};
</script>
這裡我們不在 methods 裡直接計算,而是利用 dispatch 的方式觸發 actions 裡的事件。
//src/store/index.js
export default new Vuex.Store({
state: {
count: 1
},
actions: {
incrementCount(context, counting){ //context 後方可以帶入要傳入的參數,如果沒有參數可以省略。
context.commit('INCREMENT_COUNT', counting)
}
},
mutations: {
INCREMENT_COUNT(state, counting) { //state 後方可以帶入要傳入的參數,如果沒有參數可以省略。
state.count += counting
}
}
})
actions 的事件被觸發後,會靠 commit 去呼叫 mutations 裡的方法,並且在 mutations 去改變 state 裡的資料內容,這時就可以正確地增加計數器的數字囉!
雖然可以正常運作,但是這樣的配置方式並不理想!這只是先方便讓大家閱讀並理解而已,明天我們來將它改為正確的配置。
那麼,明天再見囉!