vue---vuex

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

1、npm安装

npm install vuex --save

 

2、配置：全局配置

当咱们使用vue脚手架来搭配vue开发环境时，vuex全局该如何配置呢?

(1)首先咱们在项目的src文件下建立一个store文件夹，在store文件夹下新建一个store.js文件，来建立咱们的store

(2) 在全局main.js文件下来全局配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store.js' //引入store

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, //把store实例注册到根组件中，这样全部的子组件均可以用
  components: { App },
  template: '<App/>;'
})

 

3、来简单讲一下vuex的一些比较经常使用到的4个核心概念：state、getter、mutation、action

(1)state

每一个vuex应用的核心就是store（仓库）。说白了，‘store’它就像一个仓库、一个容器，用它来存储应用中的态状（state）。即此，它包含着你的应用中大部分的状态。 

下面介绍一下vuex与单纯的全局对象有如下两点不一样：

1.vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store 中的状态发生变化，那么相应的组件也会相应地获得高效更新。

2.咱们不能直接去改变 store中的状态（改变store中的状态，其实就是改变store中的值）。想要改变store中的状态的惟一途径就是显式地提交（commit）mutation。

接下来，咱们去建立一个简单的state

store.js 文件中：

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

const store = new Vuex.Store({
	state: {
		count: 0,
		numbers: 99
	}
})

export default store;

在各个组件中咱们该怎么去访问呢？例如，

HelloWorld.vue：

<template>
	<div class="hello">
		<button @click="onClick">点击</button>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				
			}
		},
		methods: {
			onClick(){
				console.log(this.$store.state.count);//咱们能够经过this.$store.state来访问				
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

(2)getter

vuex容许咱们在store中定义'getter'(getter能够认为是store的计算属性)，就像计算属性同样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被从新计算。

下面咱们建立一个getter：

getter它会接收state做为第一个参数

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

const store = new Vuex.Store({
	state: {
		count: 0,
		numbers: 99
	},
	getters: {
		doneTodos(state) { 传入的state参数，其就是store中的state，也就是咱们存储的状态(state)
			return state.count;
		}
	}
})

export default store;

getter会暴露为store.getters对象，因此咱们能够经过它(store.getters)以属性的形式来访问这些值：

<template>
	<div class="hello">
		<button @click="onClick">点击</button>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {

			}
		},
		methods: {
			onClick(){
				console.log('mm',this.$store.getters.doneTodos); // 0
				
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

getter还能够接收其余的getter做为第二个参数：

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

const store = new Vuex.Store({
	state: {
		count: 10,
		numbers: 99
	},
	getters: {
		num(state) {//其余的getter
			return state.numbers;
		},
		doneTodos(state, num) {//接收其余的getter做为第二个参数
			return state.count;
		}
	}
})

export default store;

3.mutation

以前咱们说过，不能直接去更改store中的状态，也就是不能直接去更改state中的值，更改vuex的store中的状态的惟一方法就是提交mutation；

vuex中的mutation，它很是相似于事件：每一个mutation都有一个字符串的事件类型(type)和一个回调函数(handler),这个回调函数就是咱们实际进行状态更改的地方，而且它会接受state做为第一个参数。

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

const store = new Vuex.Store({
	state: {
		count: 10,
		numbers: 99
	},
	getters: {
		num(state) {
			return state.numbers;
		},
		doneTodos(state, num) {
			return state.count;
		}
	},
	mutations: {
		increment(state) {
			state.count ++;
		}
	}
})

export default store;

如今咱们去触发mutation handler，来改变store中的状态，可是咱们又不能直接去调用一个mutation handler。这个选项更像是事件注册：‘当触发一个类型为increment的mutation时，调用此函数’，因此，要触发一个mutation handler，你须要以相应的type调用store.commit方法：

<template>
	<div class="hello">
		<button @click="onClick">点击</button>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {

			}
		},
		methods: {
			onClick(){
				this.$store.commit('increment');				
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

同时mutation除了接收state做为第一个参数外，它还能够额外的参数，

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

const store = new Vuex.Store({
	state: {
		count: 10,
		numbers: 99
	},
	getters: {
		num(state) {
			return state.numbers;
		},
		doneTodos(state, num) {
			return state.count;
		}
	},
	mutations: {
		increment(state, m) { //m为传入的第二个参数
			state.count += m;
		}
	}
})

export default store;

怎么去调用呢，其实和以前的同样，一样调用store.commit()方法

<template>
	<div class="hello">
		<button @click="onClick">点击</button>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {

			}
		},
		methods: {
			onClick(){
				this.$store.commit('increment',80);//第二个参数80其实就是参数m的值			
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

⚠️mutation必须是同步的

4.action

咱们知道mutation是同步的，因此在mutation中混合异步调用会致使你的程序很难调试，因此action能够帮助咱们处理异步操做。

action相似于mutation，不一样在于：

(1)action提交的mutation，而不是直接去改变状态。

(2)action能够包含任意异步操做

下面咱们来注册一个简单的action：

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

const store = new Vuex.Store({
	state: {
		count: 10,
		numbers: 99
	},
	getters: {
		num(state) {
			return state.numbers;
		},
		doneTodos(state, num) {
			return state.count;
		}
	},
	mutations: {
		increment(state, m) {
			state.count += m;
		}
	},
	actions: {
		textClick(context) {
			context.commit('increment');
		}
	}
})

export default store;

action函数会接受一个与store实例具备相同方法和属性的context对象(并不是必定是context，能够是任意参数)，context相似于store，你能够把context看成store，但二者仍是有区别的。

这样的话你就能够调用context.commit来提交mutation，或者也能够经过context.state和context.getters来获取state和getters。

咱们经过前面能够知道，mutation经过store.commit()来触发回调函数，那么action又是经过什么呢？

action经过store.dispatch方法触发：

<template>
	<div class="hello">
		<button @click="onClick">点击</button>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {

			}
		},
		methods: {
			onClick(){
				this.$store.dispatch('textClick');		
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

先更新到这吧，回头继续补充！！！！