vuex核心概念(vuex)

1. state

        State 提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

        组件访问State中数据的第一种方式：

this.$store.state.全局数据名称

        组件访问State中数据的第二种方式：

// 1. 从 vuex 中按需导入 mapState函数
import { mapState } from 'vuex'

// 通过导入的 mapState函数，将当前组件按需的全局数据，映射为当前组件的computed计算属性：
// 2. 将全局数据，映射为当前组件的计算属性
computed: {
    ...mapState(['count'])
}

2. Mutation
        Mutation用于变更Store中的数据。
        ① 只能通过 mutation 变更 Store 数据，不可直接操作 Store 中的数据。
        ② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

        触发 mutations 的第一种方式：(commit)

// 触发 mutations 的第一种方式
// add 是 mutations的 自定义方法; 5为传递的参数
this.$store.commit('add', 5)

        触发 mutations 的第二种方式：

// 1. 从vuex中按需导入 mapMutations函数
import { mapMutations } from 'vuex'

// 通过导入的 mapMutations函数，将需要的mutations函数映射为当前组件的methods方法：
// 2. 将指定的 mutations函数映射为当前组件的 methods函数
methods: {
    ...mapMutations(['add', 'addN']),
    
    btnClick() {
        // 括号内为传递的参数
        this.add(5)
    }
}

3. Action
        Action用于处理异步任务。
        如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。

        触发 actions 的第一种方式：(dispatch)

// 触发 actions 的第一种方式
// addAsycn 是 actions的 自定义方法; 3为传递的参数
this.$store.dispatch('addAsync', 3)

        触发 actions 的第二种方式：

// 1. 从vuex中按需导入mapActions函数
import { mapActions } from 'vuex'

// 通过导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法：
// 2. 将指定的 actions函数，映射为当前组件的methods函数
methods: {
    ...mapActions(['addAsync', 'addNAsync'])
    
    btnAsyncClick() {
        this.addAsych(3)
    }
}

4. Getter
        Getter用于对Store中的数据进行加工处理形成新的数据。
            ① Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
            ② Store中数据变化，Getter的数据也会跟着变化。

        使用 getters 的第一种方式：

this.$store.getters.名称

        使用 getters 的第二种方式：

import { mapGetters } from 'vuex'

computed: {
    ...mapGetters(['showNum'])
}