vue状态管理(vuex的简介和五个属性)

您所在的位置：网站首页 › 项目的6大状态是什么 › vue状态管理(vuex的简介和五个属性)

vue状态管理(vuex的简介和五个属性)

2024-07-15 08:41| 来源: 网络整理| 查看: 265

为什么使用vuex？？？？

在vue开发中，每个组件都有自己独立的数据，整个项目中的所有组件可以通过总线传值，但是如果出现几个组件需要共用同一组数据时，数据管理就会非常麻烦。

vuex简介

vuex是vue的状态 (数据) 管理工具。它采用了一种集中管理数据的思想，将整个项目中所有的公共数据放在一个统一的仓库中。然后所有组件都可以从这个仓库中读取数据，也可以通过仓库提供的方法修改数据。

vuex的五个属性和基本用法

state, getters, mutations, actions, modules。

state：vuex的基本数据，用来存储变量getters：从基本数据(state)派生的数据，相当于state的计算属性mutations：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutations 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。actions：和mutation的功能大致相同，不同之处在于 ==》 >>. Action 提交的是 mutation，而不是直接变更状态。 >>. Action 可以包含任意异步操作。modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。使用下面这两种方法存储数据：

dispatch：异步操作，写法： this.$store.dispatch(‘mutations方法名’,值)

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

vuex安装

在网上看到的三种安装方式，我只用过npm安装

在 Vue 之后引入 vuex 会进行自动安装： npm安装 npm install vuex --save yarn安装 yarn add vuex

main.js导入

import store from "./store.js"; //导入后在根组件注入 new Vue({ router, render: h => h(App), // 在根组件中注入仓库对象 store }).$mount('#app')

【本文地址】

vue状态管理(vuex的简介和五个属性)

vue状态管理(vuex的简介和五个属性)

今日新闻

推荐新闻