vuex整个流程

vuex是存储状态的管理工具，在较大的项目里会用到，如果是小项目反而不建议使用，因为用的过程会比较繁琐。这里简单讲讲state,mutations,getters,actions在vuex使用中的流程
首先大家都知道vuex是在store文件下面index.js文件写的。但是如果项目很大，有很多不同的模块都要用vuex写，全写在index.js不免显得杂乱。所以应该在store文件下新建自己的模块，然后在index.js里面引入，具体操作如下：

然后在index.js文件里引入，写在modules里，如下

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

import tuiKuanStore from "@/store/tuiKuanStore";

Vue.use(Vuex)
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    getters:{},
    modules: {
      tuiKuanStore,
    }
  })
  export default store

下面分别介绍一下state,actions,mutations,getters吧。
state：用于存放数据
actions：做出的某种行为，得到数据提交到mutations里面，它不做数据的修改
mutations：修改数据的地方
getters：返回state的数据
下面举两个案例
一、在页面点击按钮跳转页面，改变状态：

const state={
	//存个初始状态（随便啥都行）
    add_or_alter:0
}
const actions={
    //提交到mutations里处理，因为他没有要获取的数据，且它不能直接修改数据，所以必须提交到mutations
    getAddAdd_or_alterAction({commit}){
        commit('AddAdd_or_alter')
    }
}
const mutations={
	//更改数据，注意方法名要与提交的名字一样
    AddAdd_or_alter(state){
        state.add_or_alter=1
    }
}
const getters={
	//返回数据
    getAdd_or_alter(state){
        return state.add_or_alter
    }
}

==========================================
//A组件里
<router-link to="B组件">
	<el-button type="success" @click="addbaodan" class="addbaoxianAll">添加</el-button>
</router-link>

<script>
export default {
  name: "baoxianManage",
  methods:{
  //派发actions里面的方法，actions的方法又是提交到mutations里去改变的数据，这时数据已经被改变
  	addbaodan(){
      this.$store.dispatch("getAddAdd_or_alterAction")
    }
  }
}
</script>

======================================
//B组件里
<script>
import {mapGetters} from "vuex"	  //想要获取数据必须引入mapGetters
export default {
  name: "baoxianManage",
  computed: {
  //获取getters的数据，如果有多个获取方法：...mapGetters(["getAdd_or_alter", 'getBaoXianGongSiList','getbaoxainshouyingxiang'])
    ...mapGetters(["getAdd_or_alter"])
  },
  //如果要在次页面根据这个状态做一定反应，如根据不同状态显示不同东西，就把getAdd_or_alter当成属性一样用
  created() {
	   if(this.getAdd_or_alter===1){
	   		console.log('哈哈')
	   }
   }
}
</script>

二、用vuex做axios请求获取数据，在页面做出渲染

const state={
	 baoxian:[]
}
const actions={
    getbaoxainListAction({commit}){
        return new Promise((resolve, reject) => {
            console.log(this.$api)
            Axios.post(api.wang.baoXianList).then((res)=>{
                console.log(res)
                commit('boxianList',res.data.data.list)
                resolve('')
            })
        })
    }
}
const mutations={
	boxianList(state,baoxian){
        state.baoxian=[...baoxian]
    }
}
const getters={
	getBaoxianList(state){
        return [...state.baoxian]
    }
}

==========================================
//组件里
<script>
import {mapGetters}  from "vuex"
export default {
  name: "baoxianManage",
  data(){
    return{
      List:[]
    }
  },
  computed:{
    ...mapGetters(['getBaoxianList'])
  },
  created() {
  //赋值完成，在页面直接使用就行
    this.$store.dispatch('getbaoxainListAction').then(()=>{
      this.List=this.getBaoxianList
    })
  }
}
</script>

这里获取数据必须用异步，具体情况请看我另一篇文章 Vuex请求访问，组件获取返回值

以上两个案例大家多看看，用几遍就会了