vuex的四种状态：state,getters,mutations,actions

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

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

import Vue from vue;
import Vuex from vuex;
Vue.use(Vuex);

import state from './state';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';

const store = new Vuex.Store({
	state,
	getters,
	mutations,
	actions
})
export default store;

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

const state={
	success:"", //成功返回标识
	tabList:[],//导航列表
	menuList:[],//菜单
};
export default state;

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

import axios from 'axios';
const actions = {
	//获取数据
	getIndexData({commit},val){
		axios({
			url:'/Api/index/data', //路径，从后台获取
			method:'get',  // 获取方式
			params:val // 接口参数
		}).then((res)=>{
			//成功返回操作
			//indexData -- 是mutations.js里面定义的方法名
			commit('indexData',res) 
					
		})
	}
};
export default actions;

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

const mutations = {
	indexData(state,res){
		state.tabList = res.data.tab;
		state.menuList = res.data.menu;
	}
};
export default mutations;

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

const getters = {
	tabData:state=>state.tabList,
	menuData:state=>state.menuList,
};
export default getters;

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

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

<template>
    <div class="Home">
        <div v-for="(item, index) in tabData" :key="index">
            <p>{{item}}</p>
        </div>
    </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex';
new Vue({
  el: '#app',
  computed: {
 	//可以直接调用
   	...mapGetters([
		"tabData",
		"menuData"
	])
  },
  mounted:{
  	//调动actions里面的方法，让它和后台进行交互
	this.getIndexData();
  },
  methods:{
  	//调动引入的文件里面的方法：把需要的方法提前在页面上注册，然后就可以使用了
  	...mapActions([
		"getIndexData"
	])
  }
})
</script>

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