vuex是什么东西？

vuex是什么鬼？

文档上面对vuex的解释是 "一个专为 Vue.js 应用程序开发的状态管理模式",恩，看完这句是否对vuex有了一个大概的认识？
答案是："认识你个蛇头"。

好吧，在我的认识里，vuex其实就是将组件中的数据集中起来管理的东西,vue是一个根据数据渲染视图的框架，当组件中的数据变化了，视图相应的产生变化，那这里的数据变化，也可以称作是状态变化，所以官方给的解释是一个 "状态管理模式"。

了解一下vuex的安装和使用

• 和vue-router差不多，直接用包管理工具安装即可 -- npm install vuex / yarn add vuex
• 在入口文件中引入 vuex ，在注册到Vue实例中

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

使用vuex

• 既然vuex是一个把数据集中起来管理的东西，那么我们将数据集中在哪里？
• 怎么访问这些集中起来的数据？
• 如果这些数据需要修改计算，那么用何种方式计算这些数据？

开始使用vuex，vuex用数据仓库(store)来管理被集中起来的数据，我们在使用vuex的时候，首先new一个Vuex.store的实例，为了管理方便，一般我们新建一个目录专门用来存放store仓库，在vuex中需要用到vue，所以首相引入vue，vuex，再通过new方法构建出一个数据仓库的实例。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
export default new Vuex.store({参数对象})

在根组件中引入这个Vuex.store实例，将其注册到Vue实例中

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'Vuex'
import store from './store'  //引入Vuex.store实例

Vue.config.productionTip = false

Vue.use(Vuex);

new Vue({
    el: '#app',
    router,
    store,   //把Vuex.store的实例给到Vue实例中的store属性
    template: '<App/>',
    components: { App }
});

在创建实例的时候传入的参数对象中，有一个state属性，在这个属性中用来存放全局的应用数据，组件中的data存放的是局部数据。

在我们把Vuex.store实例注入到Vue实例中的时候，Vue实例对象下就会多出来一个属性：$store,我们在组件内部可以通过this.$store来访问这个Vuex.store实例。通过this.$store.state来访问被存起来的全局数据。

为了满足对数据的各种操作，在Vuex.store实例对象参数中除了state之外还有很多属性：

• getters
  • 在这个属性中存放着state原始数据的派生数据，类似于组件中的计算属性，当我们在state中取出的原始数据需要早计算之后再使用的时候，可以用getters来对数据进行处理。
  • getters属性的值是一个对象，对象下存放着计算数据的方法，这些方法接收两个参数
    • store的state (原始数据)
    • store的getters (计算后数据)
• Mutation
  • 从外部更改store中数据的唯一方法就是在外部提交一个mutation，当组件在使用数据的过程中，通过用户的操作或其他途径需要对store中的数据进行修改时，不能直接修改，唯一的办法是向store提交一个mutation，store的Mutation属性下检测提交的mutation，将修改数据的工作交由Mutation处理
  • this.$store.commit('事件名',事件处理函数的参数)
  • 在Vuex.store的实例参数中的Mutation中声明这个事件处理函数，对数据进行处理
• Action
  在Vuex中除了Mutation还有一个属性可以用来修改数据，和Mutation类似，但又不同，不同之处在于：
  - Mutation处理之后不会返回任何结果
  - Action 处理提交的也是Mutation，不是直接更改状态(数据)，Action可以包含任意异步操作
  - Action通过 this.$store.dispatch('事件名',参数)
  - 如果我们希望store修改完数据以后会返回数据给组件，那么使用actions，否则使用mutations