我所理解Vuex状态管理_vuex状态管理文件-优快云博客

本文链接：https://blog.youkuaiyun.com/ch_s_t/article/details/139150804

web应用开发中，会涉及在多个层级组件之间进行传值或者多个组件共享一个状态的问题，Vue官方提供了状态管理工具Vuex插件，主要解决状态共享和状态管理问题。

状态管理方式

vue对状态的管理是独立式的，即每个组件只负责维护自身的状态，先从一个简单的示例组件来理解状态管理，修改示例HelloWorld.vue文件如下：

<template>
  <h1>计数器{
  
  {count}}</h1>
  <button @click="increment">增加</button>
</template>
<script>
export default {
    data() {
      return {
         count: 0
        }
      },
   methods: {
       increment() {
           this.count++
       }
   }
}
</script>

页面渲染了一个按钮组件和一个文本标题，当用户单击按钮时，标题上显示的计数会自增。在VUE应用中，组件状态的管理由如下几部分组成：

1. 状态数据

状态数据是指 data函数中返回的数据，这些数据自带响应性，由其来对视图的展现进行驱动。

2, 视图

视图是指template里面定义的视图模板，其通过声明的方式将状态映射到视图上。

3. 动作

动作是指会引起状态变化的行为，用来改变状态数据，状态数据的改动最终驱动视图的刷新。

数据、视图、动作三部分协同工作就是vue状态管理的核心。在这个状态管理模式中，数据的流向是单向的，私有的。由视图触发动作，动作改变状态、状态驱动视图，此过程如图所示：

单向数据流使用图

单向数据流这种状态管理模式简洁，对于组件不多的简单应用简洁高效，但对于多组件复杂交互场景，会出现以下问题：

（1）有多个组件依赖同一个状态。使用上述状态管理方法难以实现，对于嵌套的多个组件，可以通过传值的方式传递状态，对于平级的多个组件，难以实现共享同一个状态。

（2）多个组件触发动作变更一个状态。简单方式是将触发动作交给上层，对于多层嵌套的组件，需要层层向上传递事件，在顶层统一处理状态的更改，其结果是增加代码维护难度。

Vuex 就是基于这种应用场景产生，它将需要组件间共享的状态抽取出来，以一个全局的单例模式进行管理。此种模式下，可以任意获取或更改共享状态。

概述

Vuex是一个专供Vue应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证以一种可预测的方式发生变化。它是一个存放多个组件共用的数据的一个容器，存放的数据是响应式，即存放数据发生变化，各个组件都会自动更新。

每一个vuex应用的核心就是store,store基本上就是一个容器，它包含着应用中大部分的状态，它的状态存储是响应式，当组件从store中读取状态时，若 store中状态变化，则相应组件会自动更新。不能直接改变store中状态，唯一途径就是显式提交mutation。在Vuex中有默认的五个核心概念，分别是state、Getter、Mutation、Action、Module。

Vuex组成

state是数据源，所有需要的数据就保存在state对象中，可以在页面通过this.$store.state获取定义的数据与改变相应的状态变量值。

Getter类似于vue中的compute计算属性，用于监听state中值的变化，返回计算结果。可以在页面中通过this.$store.getters.xxx方式访问。

Mutation对象用于更改store中的状态，方法是显式提交mutation,即通过 this.$store.commit()提交mutation,并且Mutation中的函数必须是同步函数。

Acton对象是通过提交mutation间接更改store中的状态，此种函数可以包含任何异步的操作。

Module对象是将store分割成模块，每个模块拥有独立的state,getter,mutation,action对象，甚至是嵌套子模块，该子模块也可以同样进行分割。

Vuex安装

有三种方式可以实现Vuex的安装，分别本地引入，CDN引入，npm 安装。

（1）本地引入，通过地址https://unpkg.com/vuex下载后存放在一个文件夹中，通过script标签引入，代码如下：

//直接下载引入
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

(2) CDN引入，直接复制CDN链接引入，注意必须先引入vue,再引入vuex ,代码如下：

//CDN方式引入
<script src="https://cdn.bootcdn.net/ajax/libs/vue4.0.2/vuex.cjs.js"></script>

(3) npm安装，通过npm安装vuex，操作代码如下：

npm install vuex --save

或

npm install vue@next --save

在一个模块化的打包系统中，即使经通过npm安装了vuex ,也必须显式地通过Vue.use()来使用Vuex

简单store使用

下面的实例通过一个简单的store来存储共享状态，能够实现不同组件之间共享该状态，在某个组件内对其state进行修改，同时也会在使用该状态的其它组件中进行修改并显示。html文件主要代码如下：

<script src="./js/vue3.js"></script>
<body>
    <div id="app-one">
        <p @click="addNum">我是{
  
  {msg}},单击我加一</p>
        <p>{
  
  {shareState.result}}</p>
    </div>
    <div id="app-two">
        <p @click="subNum">我是{
  
  {msg}},单击我减一</p>
        <p>{
  
  {shareState.result}}</p>
    </div>
<script>
 const { createApp,reactive}=Vue;