vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.1 Vuex的核心概念

1.1.1 state

state 是 Vuex 的核心概念之一，它是一个存储数据的容器，所有的数据都存储在 state 中。state 是响应式的，当 state 中的数据发生变化时，所有依赖该数据的组件都会自动更新。

1.1.2 getters

getters 是一个计算属性，可以对 state 中的数据进行处理和计算，然后返回一个新的数据。getters 是响应式的，当 state 中的数据发生变化时，getters 中的数据也会自动更新。

1.1.3 mutations

mutations 是一个同步函数，用于修改 state 中的数据。mutations 是同步的，只有通过 mutations 才能修改state中的数据，否则会导致数据的不一致。

1.1.4 actions

actions 是一个异步函数，用户处理异步操作，比如发送网络请求。actions 是异步的，只有通过 actions 才能处理异步操作，否则会导致数据的不一致。

1.2 Vuex的安装和使用

1.2.1 安装

npm install vuex --save

1.2.2 创建 store

为了方便模块管理，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter，甚至是嵌套子模块。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
 
import vuexUse from './vuexUse'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  modules: {
    vuexUse
  }
})

这里 vuexUse 是一个模块，里面包含了 state、mutation、action、getter 等，代码如下：

// store/vuexUse.js
export default {
  namespaced: true, //开启namespace:true，该模块就成为命名空间模块
  state: {
    num: 1,
    msg: 'vuex msg'
  },
  getters: {
    msgNum(state) {
      return state.msg + state.num
    }
  },
  mutations: {
    addMutation(state) {
      state.num++
    }
  },
  actions: {
    add({ commit }) {
      setTimeout(() => {
        commit('addMutation')
      }, 2000)
    }
  }
}

最后在 main.js 中引入store，并new Vue的时候注入即可。

import store from '@/store/index'
new Vue({ store, render: h => h(App) }).$mount('#app')

到这里，store 就真正创建好了，接下来就可以在组件中使用了。

1.2.3 组件使用

state，getters 有两种方式引入到组件中：

mapState：将 store 中的 state 映射到组件中，这样就可以直接使用 state 中的数据了。
mapGetters：将 store 中的 getters 映射到组件中，这样就可以直接使用 getters 中的方法了。
this.$store.state.vuexUse.num 可以直接使用 state 中的数据。
this.$store.getters['vuexUse/msgNum']  可以直接使用getters中的方法。

组件中有两种方式执行 mutations：

mapMutations：将 store 中的 mutations 映射到组件中，这样就可以直接使用 mutations 中的方法了。
this.$store.commit('vuexUse/addMutation') 可以直接使用mutations中的方法。

组件中有两种方式执行 actions：

mapActions：将 store 中的 actions 映射到组件中，这样就可以直接使用 actions 中的方法了。
this.$store.dispatch('vuexUse/add') 可以直接使用 actions 中的方法。

<template>
  <div class="wrap">
    <div>vuex 使用方式</div>
    <div>vuex Store中的num: {{ num }}</div>
    <div>$store中的num: {{ $store.state.vuexUse.num }}</div>
    <div>vuex Store中的msg: {{ msg }}</div>
    <div>vuex Store中的msgNum: {{ msgNum }}</div>
    <div>$store中的msgNum: {{ $store.getters['vuexUse/msgNum'] }}</div>
    <button type="button" @click="add">触发actions</button>
    <button type="button" @click="onActions">$store触发actions</button>
    <button type="button" @click="addMutation">触发mutations</button>
    <button type="button" @click="onMutations">$store触发mutations</button>
  </div>
</template>
 
<script>
import { mapState, mapActions, mapMutations, mapGetters} from "vuex";
export default {
  name: "vuexUse",
  data() {
    return {
    };
  },
  computed: {
    ...mapState("vuexUse", ["num", "msg"]),
    ...mapGetters('vuexUse', ["msgNum"]),
  },
  mounted() {
  },
  methods: {
    ...mapActions("vuexUse", ["add"]),
    ...mapMutations("vuexUse", ["addMutation"]),
    onActions() {
      console.log(this.$store)
      this.$store.dispatch('vuexUse/add')
    },
    onMutations() {
      this.$store.commit('vuexUse/addMutation')
    }
  }
};
</script>
 
<style lang="scss" scoped>
.wrap {
  padding: 20px;
}
</style>