简单认识Vuex

（Why）为什么使用Vuex？

组件间通信

• 父子通信
  • 父→子：props
  • 子→父：events($emit)
• 兄弟通信：eventBus
• 跨级通信：eventBus

不同组件间通信常用的方式如上所示，详细总结请看：https://blog.csdn.net/xicc1112/article/details/106211934

以上方式只适合在小范围内来进行数据的共享，如果需要频繁的、大范围的实现数据的共享会显得力不从心。使用Vuex操作可以方便的实现组件之间数据的共享。

Vuex

图源自网络
如上图所示，若想实现标号1组件与标号2组件之间的通信，按照往常的做法需要通过父组件，兄弟组件等来进行。而Vuex就相当于在组件旁边定义一个共享的状态对象STORE，标号1组件将需要共享的数据存储在STORE中，标号2组件则可以直接从STORE中获取数据，不再需要进行复杂的传递。

（What）什么是Vuex？

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

简单的说，Vuex是实现组件数据管理的一种机制，这种机制要求将想要共享的数据放到STORE中的State中存储，通过Mutation进行数据变更，通过在Action中触发Mutation处理异步操作。

（How）如何使用Vuex？

开始

1. 安装vuex依赖包

npm install vuex --save

2. 导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3. 创建store对象

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
})

4. store对象挂载到vue实例中

new Vue({
  el: '#app',
  store
})

核心概念

State

所有共享的数据统一放到Store的State中进行存储
定义共享数据：

export default new Vuex.Store({
  state: {
    count: 0
  }
})

组件访问共享数据的两种方式：

1. store.state.count

<template>
  <div>
    <h3>当前的count值为：{{ $store.state.count }}</h3>
  </div>
</template>

2. mapState
   vuex中按需导入mapState函数，通过导入的函数，将需要的数据映射为当前组件的计算属性

import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count'])
  }
}

Getter

Getter用于对Store中的数据进行加工处理形成新的数据。Getter不会修改Store中的原数据，它只是起到“包装器”的作用，将Store中的数据变一种形式然后返回。
定义Getter

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNum(state) {
      return '当前最新的数量是' + state.count
    }
  }
})

使用Getter的两种方式：

1. store.getters.showNum

<template>
  <div>
    <h3>{{ $store.getters.showNum }}</h3>
  </div>
</template>

2. mapGetters

import { mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['showNum'])
  }
}

Mutation

Mutation用于变更Store中的数据。
【！！注意：在Vuex中只能通过Mutation变更store数据，不可以直接操作Store中的数据。】

定义Mutation

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add(state) {
      state.count++
    }
  }
})

触发Mutation的两种方式

1. store.commit

<template>
  <div>
    <h3>当前的count值为：{{ $store.state.count }}</h3>
    <button @click="btnHandler1">+1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    btnHandler1() {
      this.$store.commit('add')
    }
  }
}
</script>

store.commit触发mutations时可以携带参数

 this.$store.commit('addN', 3)

此时在定义mutations函数期间对应要添加两个参数，第二个参数即传进来的参数

  mutations: {
    addN(state, step) {
      state.count += step
    },

2. mapMutations
   vuex中按需导入mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法

import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['add'])
  }
}

Action

Mutation 必须是同步函数，如果要处理异步任务则要使用Action。但是不能直接触发Action来变更数据。我们可以通过在Action中触发Muation间接变更数据。

定义Action

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add(state) {
      state.count++
    }
  },
  actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    }
  }
})

触发Action的两种方式

1. this.$store.dispatch(‘addAsync’)

<template>
  <div>
    <h3>当前的count值为：{{ $store.state.count }}</h3>
    <button @click="btnHandler">+1 Async</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    btnHandler() {
      this.$store.dispatch('addAsync')
    },
  }
}
</script>

2. mapAction

import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['addAsync'])
  }
}

以上为视频学习过程的笔记和一些简单的理解，若有不足和错误欢迎批评指正。
具体还是要看官方文档：https://vuex.vuejs.org/zh/。