老规矩，先贴效果图，在这里我是简单的贴一下，这四个状态的代码图：

1：目录结构（在这里是把四个状态分别挪出去，然后用store.js组装）

2、store.js、这里面先引入了vue和vuex，然后注册了四种状态分别的组件，最后把store输出，就可以直接用了

3、state.js:这里面主要定义了需要的属性，只有在这里定义的属性，在使用时才能获取的到

4、actions.js:这里主要是与后台进行交互，并获取数据，然后传给mutations里面进行操作

5、mutations.js:这里是对后台传来的数据进行操作，把我们需要的数据赋值给在state里面定义那个数组里

6、getters.js:这里是将我们定义的数组进行输出

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

这里就是我们vuex的四种状态了，接下来谈谈我们在项目中应该如何使用它们来实现我们的数据交互效果：

首先引入vuex：

注释***mapGetters==getters,同理，其他几个也是，人家就是这种写法，是引入vuex中我们定义的方法，需要哪个写哪个

 import {mapGetters,mapActions} from 'vuex';

然后调动引入的文件里面的方法：把需要的方法提前在页面上注册，然后就可以使用了

再然后，调动actions里面的方法，让他和后台进行交互，用this+方法名

  this.getAuthSortData(nowId);

再然后用绑定方法将数据传给你想调动数据的组件，这里后面的authbzdata方法是getters里面定义的方法，前面：authbzdata是你子组件的方法名

<auth-Model ref="model" :authBZdata="authbzdata"></auth-Model>

这样就可以使用vuex了，我这里只是用了，actions获取后台数据，getters返回数据，那个state里面，你想输出的数据必须提前定义，如果你需要对返回的数据进行操作，你就需要把mapMutations也给引入进来，然后注册方法，然后调动，这样就可以在mutation.js里面进行操作了，这里我就不写了，实现方法是一样的