1 为什么需要状态管理
一个 Vue 组件分为数据(model)与视图(view)。当通过 methods 中的方法更新数据时,视图也会自动更新。
message.vue
<template> <div> {{message}} <button @click="changeMessage">改变内容</button> </div> </template> <script> export default { name: "message", data() { return { message: '你好' }; }, methods: { changeMessage() { this.message = '我很好' } } } </script>
效果:
这个示例中的 message 与 changeMessage() 只能在 message.vue 组件中使用。而在实际应用中,常见的就是跨组件共享数据的要求。这时,就可以通过 Vuex 来优雅并高效地管理组件状态啦O(∩_∩)O~
注意:Vuex 有一定的技术门槛,它主要应用于多人协同开发的大型单页面应用。所以,是否使用 Vuex 取决于团队规模与技术储备。
2 安装 Vuex
npm install --save vuex
安装版本:vuex@3.1.0
3 基本用法
3.1 引入 Vuex
在 main.js 中引入 Vuex:
... //引入 vuex 插件 import Vuex from 'vuex'; ... //加载 vuex 插件 Vue.use(Vuex); //Vuex 配置 const store = new Vuex.Store({ state: { ... }, mutations: { ... } }); ... new Vue({ el: '#app', ... //使用 Vuex store: store, ... })
Vuex 中的 store 包含应用的数据状态和操作过程。store 中的数据发生变化,使用了这些数据的组件也会立即更新。
3.2 定义数据
数据定义在 Vuex 的 states 属性中。
我们以计数器为例。定义了一个 count 数据并初始化为 0:
const store = new Vuex.Store({ state: { count: 0 } });
3.3 读取数据
数据定义好之后,就可以在 vue 组件中通过 $store.state.count
读取出来啦,比如在 index.vue 中可以这样写:
<template> <div> ... {{count}} ... </div> </template> <script> export default { name: "index.vue", computed: { count() { return this.$store.state.count; } }, ... } </script>
这里利用计算属性,从 Vuex 的 store 中读取了计数器的当前值。
3.4 修改数据
使用 Vuex 的 mutations 属性,可以修改 state 中定义的数据。我们为计数器定义增长与减少操作:
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, n = 1) { state.count += n; }, decrease(state) { state.count--; } } });
mutations 中的函数,可以有两个入参。第一个入参是 state,第二个入参可以是任意类型。比如这里可以为新增操作,指定增长量,如果不指定,那么增长量就默认为 1。
注意:如果需要传入多个参数,那么我们可以在此传入一个带多个参数的对象。
这里使用了 ES 6 为函数设置默认值的语法。 increment(state, n = 1)
等同于:
increment (state, n){ n = n || 1; }
在 *.vue 组件中,可以通过 this.$store.commit
方法来执行 mutations。我们在 index.vue 中,新增三个按钮,用于 “+1” 、“-1” 和 "+3" 操作:
<template> <div> {{count}} <button @click="handleIncrement">+1</button> <button @click="handleDecrease">-1</button> <button @click="handleIncrementMore">+3</button> </div> </template> <script> export default { ... methods: { handleIncrement() { this.$store.commit('increment'); }, handleDecrease() { this.$store.commit('decrease'); }, handleIncrementMore() { this.$store.commit('increment', 3); } } } </script>
this.$store.commit
方法的入参,是在 mutations 中定义的函数名。
还可以通过指定 type 的方式提交, type 的值就是 mutations 中定义的函数名:
main.js
const store = new Vuex.Store({ state: { count: 0 }, mutations: { ... incrementByParam(state, params) { state.count += params.count; } } });
index.vue
<template> <div> {{count}} ... <button @click="handleByParam">+30</button> </div> </template> <script> export default { ... methods: { ... handleByParam() { this.$store.commit({ type: 'incrementByParam', count: 30 }); }, } } </script>
注意:如果在 mutations 中异步操作了数据,那么组件在 commit 提交之后,将无法立即改变数据。所以,在 mutations 中,建议尽量使用同步方法来操作数据。
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
说说如何使用Vuex进行状态管理(小结)
- Author -
deniro声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@