Vuex总结

Vuex是什么？

官方文档是这样说的：

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

这样看上去好像很难理解，那我们可以这样理解：

Vuex是一个仓库，我们首先是把运来的所有数据放进仓库里。
这样我们去获取数据就不用再去运数据了。直接从仓库里面拿数据就可以了。

其本质就是：

vuex就是在vue中创建全局变量的东西
vuex提供了一些优雅的方法，可以让我们改变全局变量的值

安装Vuex

npm install vuex  --save

在src文件目录下手动创建目录文件store,
在store文件创建store.js
store.js的内容

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

Vue.use(Vuex)

export default new Vuex.Store({
  //在state中声明全局变量，可以通过this.$store.state来访问
  state:{
    count:0
  },
  //在getters中声明state中变量的计算函数，缓存计算后的数据，通过this.$store.getters来访问
  getters:{
    //接受state作为参数，每次count 发生变化时，都会被调用
    consoleCount:state=>{
      console.log('the state count :' +state.count)
    }
  },
  //只能执行同步方法，不要去执行异步方法 通过this.$store.commit方法去调用
  mutations :{
    //改变state状态的方法，不建议直接通过
    //this.$store.state.?=?的方式改变state中的状态
    addCount:state=>{
      ++state.count;
    },
    //mutations的第一个参数即为state对象，并且可以向mutations传递额外的参数
    addNumCount:(state,n)=>{
      state.count+=n;
    }
  },
  //借助actions的手去执行mutations,通过this.$store.dispatch的方式调用
  //可以执行异步操作，可以跟踪异步数据的变化。
  actions:{
    addCount :context=>{
      //调用mutations
      context.commit('addcount');
    },
    addNumCount:context=>{
      context.commit('addNumCount',n);
    }
  }
})

在src下的main.js

import store from './store/store.js'

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