什么是vuex？vuex怎么使用？

vue五大选项

---

前言

vuex是什么？

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

什么情况下我应该使用 Vuex？

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

---

一、state

简单来说state就是vuex存储数据的地方

在state中定义数据

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

Vue.use(Vuex)

export default new Vuex.Store({
	***********************
	state: {
		Number: 9,
	},
	getters: {},
	mutations: {},
	actions: {},
	modules: {}
})

比如这里在state中定义了一个数字9,那么怎么才能显示到组件里去呢？

$store.state.Number

<template>
	<div class="app">
		<h1>{{$store.state.Number}}</h1>
	</div>
</template>

我们只需要在组件中（ $store.state.+数据名 ）就可以在组件中访问vuex中定义的数据

二、getters

从现有state数据计算出新的数据；就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当他的依赖值发生了改变才会被重新计算
Getter 接受 state 作为其第一个参数：

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

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		Number: 9,
	},
	***********************	
	getters: {
		fix:function(state){
			console.log("state",state)
			return state.Number.toFixed(2)
		}
	},
	mutations: {},
	actions: {},
	modules: {}
})

$store.getters.fix

<template>
	<div class="app">
		<h1>Vuex核心</h1>
		<h3>1.state</h3>
		<p>Number:{{$store.state.Number}}</p>
		<h3>2.getters</h3>
		<p>{{$store.getters.fix}}</p>
	</div>
</template>

使用( $store.getters.+方法名 )访问getters里的方法

三、mutations

简单来说mutations是定义vuex修改数据的方法，vuex就是吧处理数据逻辑方法全部放在mutation里面，使得数据和视图分离

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

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		Number: 9,
	},
	getters: {
		fix:function(state){
			console.log("state",state)
			return state.Number.toFixed(2)
		}
	},
	***********************
	mutations: {
		add(state){
			state.Number++
		}
	},
	actions: {},
	modules: {}
})

$store.commit(‘add’)

<template>
	<div class="app">
		<h1>Vuex核心</h1>
		<h3>1.state</h3>
		<p>Number:{{$store.state.Number}}</p>
		<h3>2.getters</h3>
		<p>{{$store.getters.fix}}</p>
		<h3>3.mutations</h3>
		<button @click="$store.commit('add')">单击让Number+1</button>
	</div>
</template>

在组件中访问mutations的方法$store.commit(‘add’)

四、actions

类似于mutation 但是mutation只能处理同步的函数，而action则是可以处理任何的异步操作
作用:
异步的更改状态，action并不直接改变state，而是发起mutation

注意：
action改变state里的值也不能直接改变 也要用在mutation里修改

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

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		Number: 9,
	},
	getters: {
		fix: function(state) {
			console.log("state", state)
			return state.Number.toFixed(2)
		}
	},
	mutations: {
		add(state) {
			state.Number++
		}
	},
	***************
	actions: {
		increment(context) {
			setTimeout(()=>{
				context.commit('add')
			},1000)
			
		}
	},
	modules: {}
})

$store.dispatch.(‘increment’)

<template>
	<div class="app">
		<h1>Vuex核心</h1>
		<h3>1.state</h3>
		<p>Number:{{$store.state.Number}}</p>
		<h3>2.getters</h3>
		<p>{{$store.getters.fix}}</p>
		<h3>3.mutations</h3>
		<button @click="$store.commit('add')">单击让Number+1</button>
		<h3>4.actions</h3>
		<!-- 让Number在1s加1 -->
		<button @click="$store.dispatch('increment')">异步操作</button>
	</div>
</template>

在组件中调用:
$store.dispatch(“方法名”)

五、moudles

作用：将store分割成模块
由于使用单一状态树，应用的所有状态会集中到一个比较打的对象。当应用变成非常复杂是，store对象就变得相当臃肿
因此为了解决此问题我们使用Mould将store分割成许多个模块，每个模块都拥有自己的state mutation action getter、甚至是嵌套子模块——从上至下进行同样方式的分割；

具体学习参考：
vuex官网