Vue2|浅学一下VueX吧（state,getters,mutations,actions,modules)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,其实通俗一点来讲可以理解成放公共变量的地方，你可以在这里放各个组件之间用到的变量，不用传来传去，你可能会想，我自己拿一个组件专门放公共变量挂到Vue的prototype上面去不就行了，也行，但是不是响应式的，要是你说写一个响应式的也不是不行，那也行，那你挺牛的。

官网上扒拉下来这张图，最重点难点就在异步要放在Actions里面再提交给mutations再操作，其他的都还好。

import { createStore } from 'vuex'

export default createStore({
  state: {
    counter: 1000
  },
  mutations: {
  },
  actions: {
  },
  getters: {

  },
  modules: {
  }
})

state

State顾名思义，就是放变量的地方，公共变量放这里，还有一个单一状态树的概念，即使你有再多的信息，Vue也推荐你只使用一个状态，只使用一个store进行维护，单一状态树能让我们最直接找到某个状态的片段，而且在之后的维护和调试过程中，方便管理。

getters

1.getters处理数据

import { createStore } from 'vuex'

export default createStore({
  state: {
    counter: 1000
  },
  mutations: {
  },
  actions: {
  },
  getters: {
    powerCounter (state) {
      return state.counter * state.counter
    }
  },
  modules: {
  }
})

  

        
-----------logincontent-----------
     
{
  {$store.state.counter}}
     
-------------getters-------------
     
{
  {$store.getters.powerCounter}}
     

App.vue里面的结构，通过 $store.state.counter拿到store下index.js里面的counter并且展示在了页面上，getters里面又有我写的一个方法，页面跑起来是这样的。

 2.getters处理数据2

state里面放了students的数据，这个时候我想在别的组件里拿到大于等于18岁的学生，如果用组件里面的计算属性，如果我想在好几个组件里面用，那我就得计算很多次，这个时候可以在getters里面写一个方法

state: {
    counter: 1000,
    students: [
      { id: 1, name: 'sherry', age: 18 },
      { id: 2, name: 'lily', age: 1 },
      { id: 3, name: 'alice', age: 23 },
      { id: 4, name: 'tom', age: 8 }
    ]
  },
  mutations: {
  },
  actions: {
  },
  getters: {
    powerCounter (state) {
      return state.counter * state.counter
    },
    adults (state) {
      return state.students.filter(s => s.age >= 18)
    }
  },
  modules: {
  }

        
-----------logincontent-----------
     
{
  {$store