vuex分析，記錄

最近項目中vuex用的比較多，特此記錄一下：

vuex：vue中的狀態管理，可用於保存一些全局的變量，方法，如購物車，token等

vuex中有state，getter，mutations，actions，modules這5個

1. state：元數據，類似於vuex中的data屬性中的值，原則上是不應該直接修改,但是如果你一定要改也是可以的
2. getter：計算屬性，和組件中的computed一樣
3. mutations：改變state數據的方法，該模塊內的方法爲同步方法
4. actions：和mutations一樣，可以異步使用
5. modules：拆分vuex的時候使用，將vuex按功能或者別的什麼拆成不同模塊

定義vuex：

import Vue from 'vue'
import Vuex from 'vuex'
import MyInfo from './MyInfo'

const modules = {
    MyInfo
}

const state = {
    name: ""
}

const getter = {
    getName: state => state.name
}

const mutations = {
    saveName: (state, data) => {
        state.name = data
    }
}

const actions => {
    saveName:({ commit }, data) => {
        commit('saveName', data)
    }
}

export default {
    modules,
    state,
    getter,
    mutations,
    actions
}

書寫modules：

modules的文件和普通的vuex文件有一個區別，在導出的時候，需要將namespaced設置爲true

export default {
    namespaced: true,
    state,
    getter,
    mutations,
    actions
}

使用vuex：

這裏只介紹我個人比較喜歡的一種方式，使用vuex中的mapGetter，mapActions

<template>
    <div></div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
    data() {
        retutn {}
    },
    computed: {
        ...mapGetters({
            // 使用vuex中非modules的getter
            getName: 'getName',
            // 使用vuex中modules中的getter
            getInfo: 'MyInfo/getInfo'
        })
    },
    methods: {
        // 使用這些數據、方法和直接使用computed中的數據、調用methods中的方法一樣
        changeName() {
            this.saveName(this.getName)
        },
        ...mapActions({
            // 使用vuex中非modules的actions
            saveName: 'saveName'
            // 使用vuex中modules中的actions
            saveInfo: 'MyInfo/saveInfo'
        })
    }
}
</script>