vue学习day five

vue学习day five

Vue状态管理（Vuex）：组件与组件之间的数据管理

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

简单来说，状态管理可以理解成为了更方便 的管理组件之间的数据交互，提供了一个集中式的管理方案，任何组件都可以按照指定的方式进行读取和改变数据

引入Vuex的步骤

第一步：安装Vuex

npm install --save vuex

第二步：配置Vuex文件

import { createStore } from 'vuex'
//Vuex的核心作用就是帮助我们管理组件之间的状态的
export default createStore({
	//所有的状态都放在这里（数据）
	state:{
		counter:0
	}
})

第三步：在主文件中引入vuex（main.js）

import store from './store'
app.use(store)

第四步：在组件中读取状态

<p>counter:{{ @store.state.couter }}</p>
//或者
//vuex提供的state快捷读取方式
import { mapState } from 'vuex';
//专门来读取vuex的数据（写在导出部分）
computed:{
	...mapState(["counter"])
}

vue状态管理核心（vuex）

最常用的核心概念：State、Getter、Mutation、Action

Getter

对Vuex中的数据进行过滤（对读取的方式提供一种更合理的方式）

import { crateStore } from 'vuex'

export default createStore({
	state:{
		counter:0
	},
	getters:{
		getCount(state){
			return state.counter > 0 ? state.counter : "counter小于0，不符合要求"
		}
	}
})

import { mapStore,mapGetters } from 'vuex';
computed:{
	...mapGetters(["getCounter"])
} 

Mutation

更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每一个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方，并且它会接收state作为第一个参数

import { createStore } from 'vuex'

export default createStore({
  state: {
    counter:10
  },
  getters:{
    getCounter(state){
      return state.counter > 0 ? state.counter :"counter数据异常"
    }
  },
  mutations:{
    addCounter(state,num){
      state.counter+=num
    }
  }
})

Action

Action类似于mutation，不同在于：

Action提交的是mutation，而不是直接变更状态

Action可以包含任意异步操作(需要用到异步操作的时候才使用Action)

import{ createStore } from 'vuex'
import axios from "axios"

export default createStore({
	state:{
		counter:0
	},
	getters:{
		getCount(state){
			return state.counter > 0?state.counter :"counter小于0，不符合要求"
		}
	}，
	mutation:{
		setCounter(state,num){
			state.counter+=num
		}
	},
	//为异步操作做准备的 只允许异步操作
	actions:{
		asynSetCount({commit}){
			axios.get("http://iwenwiki.com/api/generator/list.php").then(res =>{
			commit("setCounter",res.data[0])
			})
		}
	}
})