Vuex 的核心概念

一、vuex的中的主要核心概念如下：

• State
• Mutation
• Action
• Getter

二、State

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

// 创建 store 数据源，提供唯一公共数据
const store=new Vuex.Store({
   state: {
        count: 0
    },
})

2.1 组件访问 state 中数据的第一种方式：this.$store.state.全局数据名称

// 例如：
this.$store.state.count

2.2 组件访问 state 中数据的第二种方式：...mapState（）

// 1、从 vuex 中按需导入 mapState 函数
import { mapState } from "vuex";

     通过导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：

// 2、将全局数据，映射为当前组件的计算属性：
computed:{
...mapState(['全局数据名称'])
}

// 例如：
computed:{
...mapState(['count'])
}

// 表示 isMobile 在 "admin/layout" 文件夹下
 ...mapState("admin/layout", ["isMobile"]),

三、Mutation

Mutation用来变更 Store中的数据

1. 在 vuex 中，只能通过 mutation 来变更 store 中的数据，不可以直接来操作 store中的数据
2. Mutation 可以集中监控所有数据的变化
3. 在 mutation 中不能执行异步操作

3.1 触发 mutation 函数的第一种方式：this.$store.commit（）

在 store 文件中：

// 1、定义 Mutation 
const store=new Vuex.Store({
   state: {
        count: 0
    },
   mutations: {
        add(state) {
            // 变更状态
            state.count++
        }
    },
})

在组件页面中： 

// 触发 mutation
 methods: {
    btnHander1() {
      // 触发 mutation 的一种方式
      // commit 的作用就是调用某个 mutation 函数
      this.$store.commit("add");
    },
  },

<template>
  <div>
    <h2>当前count的最新值为：{{ $store.state.count }}</h2>
    <button @click="btnHander1">+1</button>
  </div>
</template>

 3.2 在触发 mutation 时传递参数：

// 1、定义 Mutation 
const store=new Vuex.Store({
   state: {
        count: 0
    },
   mutations: {
        add(state, step) {
            state.count += step
        }
    },
})

// 触发 mutation
 methods: {
    btnHander1() {
      // 触发 mutation 的一种方式
      this.$store.commit("add", 2);
    },
  },

3.3 触发 mutation 函数的第二种方式：...mapMutations（）

// 1、从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from "vuex";

// 2、将指定的 mutations 函数，映射为当前组件的 methods 函数
 methods: {
    ...mapMutations(["reduce"]),
    btnHander2() {
      this.reduce();
    },
  },


// 直接调用该函数
<template>
  <div>
    <h2>当前count的最新值为：{{ count }}</h2>
    <button @click="btnHander2">-1</button>
  </div>
</template>

四、Action

用于处理异步任务

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

在 store 文件中

// 定义 Action
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            // 变更状态
            state.count++
        },
    },
    actions: {
        addAsync(context) {
            setTimeout(() => {
                // 在 action 中，不能直接修改 state 中的数据
                // 必须通过 context.commit() 来触发某个 mutation 才行
                context.commit('add')
            }, 1000);
        }
    },
})

在页面中

4.1 触发 Action 的第一种方式：this.$store.dispatch（）

<template>
  <div>
    <h2>当前count的最新值为：{{ $store.state.count }}</h2>
 
    <button @click="btnHander2">+1</button>
  </div>
</template>

<script>
export default {
  name: "addition",
  data() {
    return {};
  },
  methods: {
   
    btnHander2() {
      // 触发 Action 的第一种方式
      this.$store.dispatch("addAsync");
    },
  },
};
</script>

4.2 触发 Action 时传递参数

// 定义 Action
 actions: {
        addAsyncN(context, step) {
            setTimeout(() => {
                // 在 action 中，不能直接修改 state 中的数据
                // 必须通过 context.commit() 来触发某个 mutation 才行
                context.commit('addN', step)
            }, 1000);
        }
    },

  // 触发 action
methods: {
    btnHander2() {
      // 触发 Action 的第一种方式
      this.$store.dispatch("addAsyncN", 3);
    },
  },

4.3 触发 Action 的第二种方式：...mapActions（）

// 1、从 vuex 中按需导入 mapActions 函数
import { mapActions } from "vuex";

// 通过导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法  
methods: {
    ...mapActions(["reduceAsync"]),
    btnHander3() {
      this.reduceAsync();
    },
  },

五、Getter

       用于对 store 中的数据进行加工处理成新的数据 （不会修改 store 中的原数据，只起到包装数据的作用）

1. 可以对 store 中的数据进行加工处理成新的数据，类似于 vue 中的计算属性 computed
2. store 中的数据发生变化，Getter 的数据也会发生变化

// 1、定义 Getters
const store=new Vuex.Store({
   state: {
        count: 0
    },
   getters: {
        showNum(state) {
            return '当前最新的数量是：' + state.count
        }
    },
})

5.1 使用 Getters 的第一种方式：this.$store.getters.名称

// 例如：
this.$store.getters.showNum

5.1 使用 Getters 的第二种方式：...mapGetters （）

// 1、从 vuex 中按需导入 mapGetters 函数
import { mapGetters } from "vuex";

<template>
  <div>
    <h2>{{ showNum }}</h2>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["showNum"]),
  },
};
</script>