Vuex状态管理器初步学习

翻译已于 2023-02-02 14:04:01 修改 · 686 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://vuex.vuejs.org/zh/guide/state.html

文章标签：

#vuex #vue状态管理器

于 2020-08-19 20:23:09 首次发布

Vue 专栏收录该内容

74 篇文章

订阅专栏

本文深入解析Vuex状态管理插件，涵盖安装、使用、核心概念如state、getter、mutation、action及module，适用于Vue组件间通信和状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`Vuex总体概述`

Vuex 是一个专为 Vue 开发的状态管理插件库。每一个 Vuex 应用的核心就是 store（仓库）。store中包含着应用中大部分的状态 ( state )。
实现任意组件间通信，任意组件都可以读取到store中的state对象中的数据
vue 组件，通过dispatch方法触发actions中的事件，在action事件中再通过commit方法触发mutations中的方法，然后 Mutations 中的方法就去改变State 中的数据，当state中的数据发生变化后，就会重新渲染到组件中去。这样就完成了一整个流程。

在整个流程中，改变 store 中的状态的唯一途径就是通过dispatch触发mutation中的方法。
Vuex 的状态存储是响应式的。若 store 中的状态发生变化，那么相应的组件也会更新。
store主要包括以下几个模块：

1). State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

2). Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

3). Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

4). Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

5). Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中

1、Vuex的安装与使用

1.0 Vuex有什么作用，有什么特点

Vuex的作用
1、Vuex主要用于公共状态管理，解决多个非父子组件传值问题，多个页面都能用Vuex中store公共的数据。
2、Vuex只是单页面数据的保存，不可能持久保存数据，当用户刷新浏览器的时候那么数据就有会消失。
Vuex的特点
1、遵循单向数据流
2、Vuex中的数据是响应式的

1.1 安装

npm install vuex --save

1.2 新建仓库
新建Vuex/store.js 目录与文件（一般Vuex放在与src同级的目录位置）
store.js定义仓库如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
var store = new Vuex.Store({
 	state,:{},     //使用vuex中的数据
	mutations:{},   //使用vuex中的方法
	getters:{},   //  对state中的数据进行初步加工，返回的是加工过的数据
    actions:{}       //对vuex中的方法进行了加工，形成新的方法
})
export default store

1.3 引入仓库，挂载到实例上
在main.js中，引入并挂载到根实例上

import store from './store/store.js'     //全局中引入vuex

new Vue({
  el: '#app',
  store,                 // 挂载到根实例上
  template: '<App/>',
  components: { App }
})

1.4 在任何Vue组件中，获取仓库内容

this.$store    // 可获取整个store对象

2、Vuex详解

2.1、state详解

存储在 Vuex 中的数据，
通过组件中computed属性获取state中的某个状态值赋给新变量，每当状态值变化的时候，vue就会重新计算，其新变量也会相应变化。

<template>
   <div class="count">

     <p>统计情况如下：{{$store.state.num}}</p>        //  方式一  直接读取
    <p>统计情况如下：{{count}}</p> -->                //  方式二 ，通过computed读取，可监听其变化
  <!--<p>统计情况如下：{{num}}</p>                       方式三-->
	 <!-- <p>统计情况如下：{{counts}}</p>                  方式四-->
   </div>
</template>

<script>
import { mapState } from 'vuex'
 export default{
    data(){
	   return { }
	},
   //方式二，通过computed获取，一量状态变化，计算出的值也会变化
   computed:{
	   count01(){
	      return this.$store.state.num;
	   }
	}

 //方式三，利用mapState（当一个组件需要获取多个状态的时候，我们可以使用 mapState 辅助函数帮助我们生成计算属性）
//	computed:mapState({             
//	   count:function(state){
//	       return state.num      
//	   }，
//     grade:function(state){
//	       return state.grade    
//	   }，
//	})
 
 }
</script>

2.2、getter详解

调用getter中的方法，返回对state中的原始数据进行加工筛选后的数据

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

调用方法：

可以直接调用，
可通过computed方法，与state获取方法一样，
也有mapGetters 辅助函数方法

2.3、Mutation与Action

二者都是改变状态的方式，

同步逻辑封装在mutation中，
异步逻辑封装在action中。

参考链接 https://vuex.vuejs.org/zh/guide/state.html

3、vuex的优缺点

vuex的优点

1.解决了非父子组件的消息传递（将数据存放在state中）

2.把一些常用的异步请求的数据放入state中，减少了AJAX请求次数
vuex的缺点

1.刷新浏览器，vuex中的state会重新变为初始状态

解决方法：使用sessionStorage来保存更新数据
```
解决方案vuex-along ,vuex-persistedstate
```