核心：view---actions---mutations
來一個列子：look!
實現一個大眾化，購物商城的加減按鈕：
<template>
<div>
<!-- 定義按鈕 -->
<p>
<input type="button" value="+" @click="add">
<span>{{ number }}</span>
<!-- 直接使用$store讀取狀態 -->
<span>{{ this.$store.state.number }}</span>
<input type="button" value="-" @click="reduce">
</p>
</div>
</template>
<!-- 使用輔助函式：
1.當一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性
2.使用 mapActions 輔助函式幫助我們集合事件，並進行管理 -->
import {mapState,mapActions} from 'vuex';
<script>
export default {
methods: {
//呼叫Vuex.Store實列的方法,dispatch派遣一個名稱(add)給actions作為函式
add () {
this.$store.dispatch('add');
},
reduce () {
this.$store.dispatch('reduce');
}
// 或者用輔助函式加擴充套件運算子
// mapActions():可以將所有methods裡面的方法，進行打包。即對所有的事件(或我們的行為)進行管理
...mapActions (['add'],['reduce'])
},
// 由於 Vuex 的狀態儲存是響應式的，從 store 例項中讀取狀態的方法就是在計算屬性中返回某個狀態：
// 只要state改變，就會重新計算觸發Dom更新,5種方法
computed: {
return $store.state.number,
// 使用輔助函式：mapState()
// 當對映的計算屬性的名稱與state的子節點名稱相同時，我們也可以給mapState 傳一個字串陣列
...mapState(['add'],['reduce'])//--->使用{{number}}接收
//使用展開運算子將多個物件合併為一個，以使我們可以將最終物件傳給 computed 屬性
...mapState({add2:'number'})//--->使用{{add2}}接收,add2是state中的狀態值
}
// 或者這樣computed:mapState({
// number: state => state.number
// })
}
</script>
<!-- store.js檔案 -->
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);//註冊並使用Vuex
//用常量const宣告,使用Vuex.Store例項屬性 state 存初始狀態值;
const state = {
number: 1 //初始值設定為1
}
//使用Vuex.Store 構造器選項mutations(是同步函式)來操作number
const mutations = {
add (state) { //回撥函式就是實際進行狀態更改的地方,並且它會接受 state 作為第一個引數：
state.number++
}
}
//使用Vuex.Store構造器選項actions接收來自view層點選按鈕時,呼叫Vuex.Store實列的方法,dispatch派遣一個名稱給actions作為函式,通過commit提交來觸發mutations
const actions = {
add (context) {
context.commit('add')
}
//或者使用引數解構的方式
add ({commit}) {
commit('add')
}
}
//將建立好的state、mutations、actions傳入Store;
//把store傳遞給根元件，讓所有子元件都能獲取到。子元件通過this.$store訪問。
export default new Vuex.Store ({
state,mutations,actions
})複製程式碼