Vue.2.0中Vuex状态管理模式

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.state

存放仓库的状态

//存放状态 (不会和组件直接进行任何的交互)
state: {
  name:"鲁班",
    age:20,
     arr:[],//ajax 请求到的后台数据
      brr:[1,2,3,4]
},

组件取值：

//模板中：
$store.state.属性
//js中：
this.$store.state.属性

2.mutations

 如果要修改state中数据，必须通过mutations进行修改（同步的）
 专门负责直接修改state中的数据，不能进行异步操作

mutations: {
  changeName(state,name){
    state.name = name;
  },
    changeAge(state,age){
      state.age = age
    },
      changeArr(state,arr){
        state.arr = arr;
      }
},

vue文件中触发mutations中的方法

$store.commit('事件名称'，'参数')

3.actions

作用：异步处理修改 state中的数据

组件调用当前actions中的 方法，actions方法调用mutations的方法，修改state数据；

actions: {
		// context 是 store实例
		asyncChangeName(context,name){
			// console.log('12345678',name)
			setTimeout(()=>{
				context.commit('changeName',name);
			},2000)
		},
		asyncChangeAge(context,age){
			context.commit('changeAge',age);
		}
}

vue文件中触发actions中的方法:

this.$store.dispatch('事件名称','参数')

4.getters

类似于计算属性一样的属性；

 作用是对外输出

getters:{
		// 输出属性给组件
		name(state){
			// return  state.username;
			return  state.name;
		},
		age(state){
			return  state.age;
		},
}

6.辅助函数

mapGetters是快速获取getters中的数据，在计算属性中进行操作

mapActions是快速获取actions中的方法，在methods中进行操作

<script>
	import {
		mapGetters,
		mapActions,
		mapState
	} from "vuex";

	export default {
		mounted() {

		},
		computed: {
			...mapGetters(["name", "age", "info"]),
			a(){
				return 10;
			}
		},
		methods:{
			...mapActions(["asyncChangeName","asyncChangeAge"]),
			
		}
	}
</script>

三.案例 组件层(vue)和状态层(vuex)解耦

1.轮播图数据

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import { reqBanners }  from "../request/index.js"

export default new Vuex.Store({
	state: {
		// 首页banner图片
		banners:[]
	},
	mutations: {
		// 修改banner图片
		changeBanners(state,banners){
			state.banners = banners;
		}
	},
	actions: {
		// 获取banner数据
		reqBanners(context){
			reqBanners().then(res=>{
				context.commit("changeBanners",res.data.list)
			})
		}
	},
	getters:{
		// 提供banners到组件
		banners(state){
			return  state.banners;
		}
	},
	modules: {}
})

home.vue

<template>
	<div>
		<h3>首页</h3>
		<!-- 1.获取轮播图数据 -->
		<div class="banner" v-for="(item,index) in banners" :key="item.id">
			<img  :src="$baseUrl +  item.img" alt="">
		</div>
	</div>
</template>

<script>
	
	import  { mapGetters,mapActions }  from "vuex"
	
	export default {
		computed:{
			...m