Vue 核心插件 Vuex （一）

莫道一龙

已于 2023-08-04 15:13:20 修改

阅读量286

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-07-27 15:13:51 首次发布

本文链接：https://blog.csdn.net/m0_57284405/article/details/131959662

版权

Vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 是一个 Vue 的状态（状态即为数据）管理工具，是Vue为我们提供的一个插件，它可以帮助我们管理共享状态，并附带了更多的概念和框架。

Vuex 使用场景

多处需要更改同一个数据时，需要使用vuex

例如：购物车，在商品列表页面添加商品会更改这个值，在详情页增减商品数量、删除商品等操作都会更改这个值，通过提交mutation来修改这个值就方便快捷很多。如果每次进行商品数量操作都需要调用接口，虽然也能实现，但会非常繁琐，并且很消耗浏览器的性能。

跨组件共享数据、跨页面共享数据

例如loading状态，可在多个页面进行使用

Vuex的优势

Vuex的优点

共同维护一份数据，数据集中化管理
响应式变化
操作简洁（vuex提供了一些辅助函数）

注意：

不是所有的场景都适用于vuex，因为Vuex需要安装和搭建，过程相对繁琐，不适合简单的项目应用。但是，如果需要构建一个中大型单页应用，并在组件外部管理状态，Vuex 将会成为自然而然的选择。
刷新浏览器，vuex中的state会重新变为初始状态。
vuex无法进行永久存储（持久化存储）。

此外vuex还存在一些潜在的缺陷

学习曲线较陡：Vuex 作为一个较为复杂的状态管理库，对于初学者来说，学习曲线可能会比较陡峭。它引入了一些新的概念和术语，如 state、mutations、actions、getters 等，需要一定的时间和精力来理解和熟悉。

冗余的代码量：使用 Vuex 可能会导致一些冗余的代码。在大型应用中，为了将状态集中管理，需要定义一系列的 mutations 和 actions，这可能会使代码量增加。对于一些简单的应用，使用 Vuex 可能会显得有些过于繁琐。

过度使用导致性能问题：过度使用 Vuex 可能会导致性能问题。在一些情况下，组件之间共享的状态可以直接通过 props 和事件来传递，而不必通过 Vuex 进行管理。过多的使用 Vuex 可能会导致冗余的状态更新，从而影响性能。

非必要的引入复杂性：对于一些简单的应用，使用 Vuex 可能会引入不必要的复杂性。Vuex 主要适用于大型应用，当应用规模较小或需求简单时，引入 Vuex 可能会使代码结构变得复杂，增加开发和维护的成本。

可能存在状态管理问题：由于 Vuex 的状态是全局共享的，不当的使用可能会导致状态管理的混乱。如果不遵循一定的规范和约定，可能会出现状态修改的顺序问题，进而导致应用的行为不一致或难以追踪问题。

Vuex的安装和使用

Vuex的安装

方法一：

在脚手架创建项目时勾选 vuex 的选项，系统会自动创建

方法二：

在项目终端输入npm 或 yarn命令安装

npm install vuex@next --save

yarn add vuex@next --save

Vuex的配置使用

如果采用脚手架方式进行创建，无需任何操作，可以忽略此步骤

1. 新建store文件夹，创建index.js，进行如下配置，在main.js中进行引入

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    
  },
  getters: {
    
  },
  //里面定义方法，操作state方发
  mutations: {
    
  },
  // 操作异步操作mutation
  actions: {
    
  },
  modules: {
    
  },
})

在main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' // 引入store
Vue.config.productionTip = false

new Vue({
  router,
  store,  // 挂载store
  
  render: h => h(App)
}).$mount('#app')

下篇

Vue 核心插件 Vuex （二）