提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
一、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
- 定义vuex数据的地方
- 示例:
state:{
cartNum:10
}
- 在组件访问数据的数据示例
<p>购物车数量:{{$store.state.cartNum}}</p>
2.mutations
- 修改state数据必须在mutations中的方法
- 示例
SET_CART_NUM(state,data){
// 去修改cartNum的值
state.cartNum = data
}
- 在组件中访问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
- 定义异步,网络延迟等方法
- 示例
actions: {
// 定义异步,网络延迟等方法
// 只能调用mutations,不能直接修改state
getCartNum(context,data){
// 可以执行网络请求,等待延迟
setTimeout(()=>{
// 等待4s以后执行mutations的SET_CART_NUM方法
context.commit("SET_CART_NUM",data)// 修改了cartNum的值
},4000)
}
},
- 在组件中使用:示例
<button @click="$store.dispatch('getCartNum',25)">延迟改变</button>
<button @click="$store.dispatch('getCartNum',77)">延迟改变</button>
4.getters
- 定义:从现有数据计算新的数据
- 示例:
getters: {
// 从现有数据计算出新的数据
fee:function(state){
return state.cartNum*0.5
}
},
- 在组件中使用:示例
<p>佣金:{{$store.getters.fee}}</p>
总结
例如:以上就是今天要讲的内容,本文仅仅简单介绍了vuex部分功能的使用,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。