Vue插件——状态管理与Vuex基本用法
1.状态管理与使用场景
Vuex作为Vue的一个插件使用,可以更好地管理和维护整个项目的组件状态。
在实际业务中,经常有跨组件共享数据的需求,Vuex的设计就是用来统一管理组件状态的,它定义了一系列规范来使用和操作数据,使组件应用更加高效。
使用Vuex会有一定的门槛和复杂性,它的主要使用场景是大型单页应用,更适合多人协同开发。如果项目不是很复杂,也许bus方法就能很简单地解决需求。
当然,并不是所有大型多人协同开发的SPA项目都必须使用Vuex,在一些生产环境中只是使用bus也能实现得很好,用与否主要取决于团队和技术储备。
每一个框架的诞生都是用来解决具体问题的。虽然bus已经可以很好地解决跨组件通信,但它在数据管理、维护、架构设计上还知识一个简单的组件,而Vuex却能更优雅和高效地完成状态管理。
2.Vuex基本用法
2.1安装并使用Vuex
首先通过NPM安装Vuex
npm install –save vuex
在main.js里,通过Vue.use()使用Vuex:
import Vue from 'vue'; import Vuex from 'vuex'; import App from './app.vue'; Vue.use(Vuex); const store = new Vuex.Store({ //vuex的配置 }); new Vue({ el: '#app', store: store, render: h => { return h(App) } });
2.2 设置与读取数据
仓库store包含了应用的数据(状态)和操作过程。Vuex里的数据都是响应式的,任何组件使用同一store的数据时,只要store的数据变化,对应的组件也会立即更新。
数据保存在Vuex选项的state字段内,比如要实现一个计数器,定义一个数据count,初始值为0:
const store = new Vuex.Store({ state:{ count:0 } }); 在任何组件内,可以直接通过$store.state.count读取 //index.vue <template> <div> <h1>首页</h1> {{count}} </div> </template> <script> export default{ computed:{ count(){ return this.$store.state.count } } } </script>
现在访问首页,计数0已经可以显示出来了。
2.3 更新数据
在组件内,来自store的数据只能读取,不能手动改变,改变store中数据的唯一途径就是显式地提交mutations。
mutations是Vuex的第二个选项,用来直接修改state里的数据。给计数器增加2哥mutations,用来加1和减1:
//main.js const store = new Vuex.Store({ state:{ count:0 }, mutations:{ increment(state){ state.count++; }, decrease(state){ state.count--; } } }); 在组件内,通过this.$store.commit方法来执行mutations。在index.vue中添加两个按钮用于加和减: <template> <div> <h1>首页</h1> {{count}} <button @click="handleIncrement">+1</button> <button @click="handleDecrease">-1</button> </div> </template> <script> export default{ computed:{ count(){ return this.$store.state.count; } }, methods:{ handleIncrement(){ this.$store.commit('increment'); }, handleDecrease(){ this.$store.commit('decrease'); } } } </script>
这看起来很像JavaScript的观察者模式,组件只负责提交一个事件名,Vuex对应的mutations来完成业务逻辑。
Mutations还可以接收第二个参数,可以是数字、字符串或对象等类型。比如每次增加的不是1,而是指定的数量,可以这样改写:
//main.js,部分代码省略 mutations:{ increment (state, n=1) { state.count+=n; } }
阅读更多更多内容,欢迎关注微信公众号“让知识成为资产”。
- Vue 状态管理 Vuex
- Vue状态管理vuex
- 理解Vue的状态管理模式Vuex
- vue.js的状态管理vuex中store的使用
- vue的状态管理模式vuex
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
- Vue中状态管理——Vuex
- 详解Vue中状态管理Vuex
- Vue 2.X的状态管理vuex记录详解
- [Vue.js启航]——使用Vuex进行状态管理
- vue框架 vuex集中式状态管理架构
- Vue之Vuex管理状态的使用
- 在Vue中使用Vuex进行状态管理指南
- Bug基本要素/状态流程图/严重级别判断及管理工具
- Eclipse中SVN管理工具Subclipse客户端插件的基本操作
- ASP.NET状态管理 APPlication,Session,Cookie和ViewState等对象用法和区别
- vue的基本用法与常见指令
- Vue.JS项目中5个经典Vuex插件
- jsColor取色器插件的基本用法
- ASP.NET状态管理 APPlication,Session,Cookie和ViewStat用法