Vuex小试牛刀的小功能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

一、Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

二、引用方式

1.直接下载 / CDN 引用

代码如下：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

2.NPM安装

代码如下：

npm install vuex --save

三.Vuex的核心

1.state

1. 定义vuex数据的地方
2. 示例:

state:{
cartNum:10
}

3. 在组件访问数据的数据示例

<p>购物车数量:{{$store.state.cartNum}}</p>

2.mutations

1. 修改state数据必须在mutations中的方法
2. 示例

SET_CART_NUM(state,data){
			// 去修改cartNum的值
			state.cartNum = data
		}

3. 在组件中访问mutations的方法示例:

<button @click="$store.commit('SET_CART_NUM',100)">修改为100</button>
<button @click="$store.commit('SET_CART_NUM',$store.state.cartNum+1)">修改+1</button>

3.actions

1. 定义异步,网络延迟等方法
2. 示例

	actions: {
		// 定义异步,网络延迟等方法
		// 只能调用mutations,不能直接修改state
		getCartNum(context,data){
			// 可以执行网络请求,等待延迟
			setTimeout(()=>{
				// 等待4s以后执行mutations的SET_CART_NUM方法
				context.commit("SET_CART_NUM",data)// 修改了cartNum的值
				
			},4000)
		}
	},

3. 在组件中使用:示例

<button @click="$store.dispatch('getCartNum',25)">延迟改变</button>
<button @click="$store.dispatch('getCartNum',77)">延迟改变</button>

4.getters

1. 定义:从现有数据计算新的数据
2. 示例:

getters: {
		// 从现有数据计算出新的数据
		fee:function(state){
			return state.cartNum*0.5
		}
	},

3. 在组件中使用:示例

<p>佣金:{{$store.getters.fee}}</p>

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了vuex部分功能的使用，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。