说说如何使用Vuex进行状态管理(小结)
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 中，建议尽量使用同步方法来操作数据。
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
如何在Vue3和Vite项目中用SQLite数据库进行数据存储
SQLite是一种嵌入式关系型数据库管理系统,是一个零配置、无服务器的、自给自足的、事务性的SQL数据库引擎,这篇文章主要给大家介绍了关于如何在Vue3和Vite项目中用SQLite数据库进行数据存储的相关资料,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue3 vite如何读取文件内容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
在 Vue.js 中,我们可以通过自定义指令的方式来实现拖拽功能,使得代码更加模块化和可复用,本文将介绍如何基于 Vue.js 实现一个简易的拖拽指令,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要为大家详细介绍了vue实现简单加法计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要为大家详细介绍了vue iview封装模态框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本篇文章主要介绍了VUE实现一个分页组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了VUE中v-on:click事件中获取当前dom元素的代码，文中同时给大家提到了v-on：click获取当前事件对象元素的方法,需要的朋友可以参考下2018-08-08
这篇文章主要给大家介绍了在vue.js中抽出公共代码的方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
因为程序的调试非常重要,程序猿可以利用好的调试方法去查找定位自己的问题所在之处,从而,达到纠正自己程序错误的地方,健壮自己的程序,让问题变得越来越少,程序变得越来越健康,所以本文给大家介绍了Vue程序调试和排错技巧,需要的朋友可以参考下2024-12-12
学了vue写项目这么久,忽然发现路由懒加载的写法,节省了加载所有路由的时间。本文主要介绍了vue3.0+vite2实现动态异步组件懒加载，感兴趣的可以了解一下2021-06-06
最新评论