Vuex讲解以及使用方式

Vuex官网：Vuex 是什么？ | Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它帮助开发者集中的管理项目中需要用到的各类状态

1. 使用Vuex

建议使用npm的方式进行Vuex的引用

npm install vuex --save

import Vuex from 'vuex'

Vue.use(Vuex)

同时，需要为Vue实例提供创建好的store进行注入

const store = new Vuex.Store({
    ...
})

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

注入完成后即可通过this.$store使用

2. Vuex状态管理

Vuex的状态管理包括4个部分：State，Getters，Mutations，Actions

2-1. State

Vuex使用单一状态树State来定义并存储项目中用到的全部的应用层级状态

state: {
    [状态名]: [状态初始值]
}

通过store.state.[状态名]即可获取该状态的值

2-2. Getters

当我们需要获取从state中派生出的一些状态时，可以通过定