Vuex快速入門

Vuex是什麼？
做數據共享和傳遞（不同頁面之間的數據傳遞）
單一狀態樹管理，讓數據的修改脈絡更佳清晰，便於定位問題，模塊化
Vuex有什麼
State：要共享的數據（全局變量）
Getter：相當於vue中computed，及計算屬性，可以用於監聽，計算state中的值的變化
Mutation：Vuex中去操作數據的方法（只能同步執行）
Action：用來操作Mutation的動作，他不能自己去操作數據源，但可以把mutation變爲異步的
Modules：即分類管理狀態值
在src目錄下新建一個store文件夾
然後在main.js文件中註冊vuex的實例

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 按需導入
import {addLocalGoods,getTotalCount,updateLocalGoods,delectLocalGoods} from '../common/localStorage.js'

export default new Vuex.Store({
    // 在state中去聲明全局變量，可以通過 this.$store.state 訪問
    state: {
     buyCount:0
    },
    // 在getters中聲明state中變量的計算函數，緩存計算後的數據， 通過 this.$store.getters 調用
    getters: {
        // 接受state作爲參數，每次 count發生變化時 ， 都會被調用
         getBuycount:state=>{
            // return state.buyCount
            return state.buyCount > 0 ? state.buyCount : getTotalCount()
        }
    },
    // 只能執行同步方法，通過 this.$store.commit 方法調用
    mutations: {
        // 改變state狀態的方法，不建議直接通過  
        // this.$store.state.? = ？的方式改變state中的狀態
       //載荷goods === {goodsId:100,count:3}
        addGoods(state,goods){
            // state.buyCount += goods.count
            state.buyCount = addLocalGoods(goods)
        },
        updateGoods(state,goods){
            state.buyCount = updateLocalGoods(goods)
        },
        delectgoodsId(state,goodsId){
            state.buyCount = delectLocalGoods(goodsId)
        }
    },
    // 藉助actions的手去 執行 mutations ， 通過  this.$store.dispatch 的方式調用
    // 可以用來執行異步操作，可以跟蹤異步數據狀態變化
    actions: {
          addGoods: content => {
            // 調用 mutation
            content.commit('addGoods');
        },
         updateGoods: (content, n) => {
            content.commit(' updateGoods', n);
        }
    }
})

這些就是vuex中最基礎的概念，瞭解了這些，就可以入門vuex了，有哪裏不明白的或不對的，留言下，咱們可以一起討論、共同學習！