vuex 的備注

   // vuex的公用數據放置處
        state: {
            count: 0,
        },
        // (方法) 在里面可以去修改state里面的數據(在這里面不能寫異步操作)
        mutations: {
            方法名 (state,vari) {
                state.count=vari
                // 傳值并設置count
            }
        },
        // 異步操作
        actions: {},
        // 類似計算屬性 (這個不會修改state里面的數據)
        getters: {},

常用命令

this.$store.state.變量
// 獲取state里面的變量

this.$store.getters.計算名稱
// 訪問vuex的計算屬性

this.$store.commit('方法名', 10)
// 調取mutations中的方法,并傳值

this.$store.dispatch('方法名', 1)
// 調用vuex異步函數

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
       //全局數據
        //data
        list:[]
    },
    mutations: {
        //修改數據的一些方法，不允許組件直接修改全局數據，必須使用mutations內的方法進行修改
        //可以接收兩個參數，第一個必須是模塊的局部狀態對象(state數據),個可選參數
        initList(state, list) {
            state.list = list
        }
    },
    actions: {
        //異步的一些方法，不允許該內部方法直接操作全局數據
        //可以調用mutations內的方法進行操作數據
        //可以接收兩個參數，第一個必須是store對象，第二個可選參數
        getList(context) {
            axios.get('/list.json').then(({ data }) => {
                //調用mutations內的initList方法，傳入數據
                context.commit('initList', data)
            })
        }
    },
    getters:{
        //Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，
        //tter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。
    }
})

//state(數據|狀態)
this.$store.state.list
import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'
computed:{
    ...mapState(['list'])//...展開符
    //這種方法在使用時候就像使用自身計算屬性一樣，直接使用list
}
//mutations
this.$store.commit('initList',list)
methods: {
    ...mapMutations(['initList'])
}
//這種方法在使用時候就像使用自身方法一樣一樣，直接使用initList(list)
//actions
this.$store.dispatch('getList')
methods: {
    ...mapMutations(['initList']),
    ...mapActions(['getList'])
}
//這種方法在使用時候就像使用自身方法一樣一樣，直接使用getList()
//getters
this.$store.getters.name//name:方法名
computed:{
    ...mapState(['list'])//...展開符
    ...mapGetters(['name'])
    //這種方法在使用時候就像使用自身計算屬性一樣，直接使用方法名
}