vuex有哪几种属性？

最新推荐文章于 2024-02-28 11:09:34 发布

晚时之秋

最新推荐文章于 2024-02-28 11:09:34 发布

阅读量227

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_66557048/article/details/129544635

版权

Vuex是Vue.js的状态管理库，用于处理应用的共享数据。它包括state（存储数据）、mutations（安全修改state）、actions（异步操作和提交mutations）、getters（计算属性）以及modules（模块化，解决大项目状态管理）。使用Vuex主要在处理复杂单页应用时，帮助管理共享状态。

摘要由CSDN通过智能技术生成

一、vuex是什么？

vuex 是 Vue 配套的公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便整个程序中的任何组件直接获取或修改我们的公共数据。

注意点:只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上。

二、什么是“状态管理模式”？

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

四、什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择

五、vuex的五个属性

state：state类似容器，包含应用的大部分状态（相当于组件的data数据），state的有几个特点如下：
- 一个页面只能有一个state
- 状态存储是响应式的
- 不能直接改变 state 中的状态，唯一途径显式地提交mutations
mutations:mutations是唯一修改状态的事件回调函数，每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
注意： 更改 Vuex 的 state 中的状态的唯一方法是提交 mutation。回调函数可以接受两个参数，第一个参数是state状态，第二个参数是 mutation 的载荷就是外面store.commit 传入额外的参数。
getter:你可以理解它是一个状态计算属性，好比组件里面的computed属性，所以getter 的返回值也会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，说白了就是对 store 中的 state 做了一层封装，getter 可以接受两个参数，第一个是状态state,第二个参数是其他getter `
actions:actions 类似于 mutations，不同在于：
- Action 提交的是 mutations，而不是直接变更状态。
- Action 可以包含任意异步操作。
module:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

模块的命名空间
如果把所有的状态都放在一个 store 对象里面，当应用变得非常复杂时，store 对象就有可能变得相当臃肿，维护起来也会变得相当复杂，所以我们可以用模块来划分。比如A module，B module, 在项目中很有可能A module内部的 action、mutation 和 getter 可能和B module内部的 action、mutation 和 getter方法名定义一样，但是这些方法又都是全局的，那么假如提交一次 mutation，A module 和 B module 的 mutation 都会执行，这肯定不行，所以可以用模块的命名空间来区分，可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。