小编已经Wie大家分享完了有关Vuex的知识，下面进行简单的总结。

一、store的目录结构

  在前面，我们都将 state、mutations、getters、actions、module 放在index.js文件中，当代码量多的时候，就不利于管理，所以我们一般都将 mutations、getters、actions、module 抽离出去。具体的抽离结构如下：

二、Vuex基本概念

1.定义

Vuex是一个管理共享状态的管家，并且该状态是响应式的

2.状态管理

主要分成单界面管理和多界面管理

① 单界面管理

  首先明白三个概念：State：状态；View：视图层；Actions：主要是用户的各种操作：点击、输入等等，会导致状态的改变。
  而所谓的单界面就是指State、View、Action都是在同一个页面中的，所以叫做单页面状态管理。具体运作方式如下图：

② 多界面状态管理

  多界面状态管理就是指当某个状态被多个界面同时共享时，我们需要一个管家来管理这个被多界面共享的状态。具体的运作过程见下图：

3.使用方式

首先在终端安装Vuex，然后创建Vuex实例，最后书写相关的代码。具体使用如下图：

三、核心概念

Vuex中包含了5个核心概念，分别是：state、actions、getters、module、mutations。

1.state--单一状态树

  为了不让状态信息保存到多个Store对象中的，Vuex使用了单一状态树来管理应用层级的全部状态。
  也就是在项目中最好只new 一个store对象，然后所有状态有关的东西都放在一个store中的state进行统一的管理。

2.getters

① 定义

  getters 相当于计算属性。当数据要经过一系列变化时，将这一系列的变化写在getters内部。

② 使用

  在getters中声明一个方法，该方法的默认参数是state，然后返回相应的结果即可。具体代码如下:

//index.js
getters:{
      powerCounter(state){
        return state.counter * state.counter
      }
    }

<!--App.vue 文件-->
<template>
  <div id="app">
    {{$store.getters.powerCounter}}
  </div>
</template

③ 参数

  getters中出了默认的state之外，还可以传递getters参数，用来获取当前getters中的方法。比如：

const store = new Vuex.Store({
    state:{
      student:[
        {id:100,name:'zhangsan',age:21},
        {id:200,name:'lisi',age:18},
        {id:300,name:'wangwu',age:22},
        {id:400,name:'zhaoliu',age:19}
      ]
    },
    getters:{
      morestu(state){
        return state.student.filter(s => s.age>20)
      },
      morestuLength(state,getters){
        return getters.morestu.length
      }
    }
})

在morestuLength方法中通过参数getters获取了morestu方法的结果

④ 返回值

返回值可以返回变量，还可以返回函数。比如：

//返回变量
getters:{
      powerCounter(state){
        return state.counter * state.counter
      }
    }

//返回函数
    getters:{
      moreAgeStu(state){
        return function(age){
          return state.student.filter(s => s.age>age)
        }
      }
    }

3.mutations

① 作用

  Vuex的store状态的更新唯一方式：提交Mutation。也就是我们前面提到过的，必须经过 state --> Vuex --> Action --> Mutations 这个路径修改state的状态。

② 组成

主要由事件类型和回调函数组成。比如：

mutations:{
    increase(state){
      state.counter++
      }

increase时间类型，(state){ state.counter++}是回调函数

③ 定义方式

主要是事件类型+回调函数，具体代码如上所示，这里不再展示

④ 参数

传递的参数主要有默认的state、变量和函数

⑤ 提交风格

主要有两种方式，一种是commit，一种是type。
参数和提交风格可以参考这篇文章 https://www.jianshu.com/p/e695ab292460

⑥ 响应规则

  相应的原理是预先在store对象定义的属性会被加入到响应式系统中，而没有预先在store对象定义的属性不会被加入到响应式系统中，但是可以通过set方法使新增加的属性具有响应式。具体做法参考该文章:https://www.jianshu.com/p/e8a13d8b43a9

⑦ 常量类型

  使用常量替代Mutation事件的类型。将这些常量放在一个单独的文件中, 方便管理以及让整个app所有的事件类型一目了然。具体的使用方式见该文章：https://www.jianshu.com/p/9802842448bc

4.actions

① 定义

Action类似于Mutation, 但是是用来代替Mutation进行异步操作的。

② 使用

使用方式和mutations类似，只是默认的参数是context，而且调用时是用dispatch调用的。

③ 参数

传递的参数很简单，这里不叙述

④ 在内容使用Promise

  使用Promise的目的是，除了修改数据之外还可以进行别的操作。一般将修改的数据写在Promie内部，然后别的操作写在then函数内，具体可以参考该文章:https://www.jianshu.com/p/3f566f48401f

5.module

  Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等。
  mudole中的state、mutation、action、getters方式的书写和在store中书写是一样的，这里就不再叙述，不过要注意的是：在模块中，context.commit()仅仅提交自己模块的方法而不包括store中的方法。具体的可以参考该文章：https://www.jianshu.com/p/f4cb00cd0574

以上就是Vuex的全部内容，写的不好的地方还请大家多多包涵o(￣︶￣)o