Vuex终极版总结

最新推荐文章于 2024-08-16 18:15:23 发布

IKun&

最新推荐文章于 2024-08-16 18:15:23 发布

阅读量146

点赞数 3

分类专栏：前端框架 vue项目文章标签： vue.js

本文链接：https://blog.csdn.net/IKun_class/article/details/107326115

版权

前端框架同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

vue项目

1 篇文章 0 订阅

订阅专栏

Vuex知识总结

一、安装Vuex

手动选择方式

首先如果想要通过手动选择的方式，可以按以下步骤操作，
在这里插入图片描述
选择后会出现这样一个页面，勾选Vuex即可

安装完以后项目目录会出现一个store的文件夹，至此恭喜你已经安装完成！

单独安装

在写项目的时候我们经常会出现忘记勾选Vuex这一选项，那么还有一种方式就是单独安装，当然就没有集成方式方便了。

   npm install vuex --save

需要注意的是这里一定要加上 –save，因为这个包我们在生产环境中是要使用的。
下一步是引用Vuex
新建vuex 文件夹，在文件夹下新建 store.js 文件，在文件中引用vuex,并在main.js文件中进行导入,进行挂载。
在这里插入图片描述
然后在store.js中创建 store 对象

const store=new Vuex.Store({
	state:{},
	mutations:{},
)

然后就可以正常使用了！！！

二、Vuex介绍

vuex主要解决大中型复杂项目的数据共享问题,是专门用来管理vue.js应用程序中状态的一个插件,是一个状态管理工具。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。

三、Vuex主要流程

主要包括 state,actions,mutations和 modules 4个要素

先上一张图
在这里插入图片描述
组件通过this.$store.dispatch 到 actions，actions 是异步操作，主要用于一些axios请求等异步操作。actions里面会有一个context参数，（这个参数里面是整个store对象，可以获取store中的一些信息）可以再在后面追加一些参数，再在actions中通过 context.commit方法提交到mutations中，commit()方法中有两个参数，第一个参数是要提交的事件名称，（可以跟mutations中的名字一样哦！）第二个参数是要传的参数，只有在mutations 中才可以通过一些业务逻辑操作改变 state，并且里面是同步操作，从而同步到组件，更新其数据状态。

说到这里思路是不是有点清晰了呢？是谁说没有！

那我们来看一下一个完整的store的结构是这样的：

const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

接下来来说一下每个属性的具体使用

1、state

state上就是一些变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。另外有些状态是组件私有的状态，称为组件的局部状态，我们不需要把这部分状态放在store中去。

如何在组件中获取vuex状态

由于vuex的状态是响应式的，所以从store中读取状态的的方法是在组件的计算属性中返回某个状态。
在这里插入图片描述
就可以在dom中直接使用，这样，组件中的状态就与store中的状态关联起来了。每当store发生变化时，都会重新求取计算属性，从而更新DOM。

辅助函数 MapState

当一个组件获取多种状态的时候，则在计算属性中要写多个函数。为了方便，可以使用mapState辅助函数来帮我们生成计算属性。

import { mapState } from  'vuex';

actions

因为mutations中只能是同步操作，但是在实际的项目中，会有异步操作，那么actions就是为了异步操作而设置的。这样，就变成了在action中去提交mutation，然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数，而mutations则是用commit函数。

组合actions

因为action是异步的，那么我们需要知道这个异步函数什么时候结束，以及等到其执行后，会利用某个action的结果。这个可以使用promise来实现。在一个action中返回一个promise，然后使用then()回调函数来处理这个action返回的结果。

在这里插入代码片

mutations

mutations里面是如何更改state中状态的逻辑。更改Vuex中的state的唯一方法是，提交mutation，即store.commit(‘参数名’)。
上面已经说的很详细了，就不一一阐述了…

modules

module是为了将store拆分后的一个个小模块，这么做的目的是因为当store很大的时候，分成模块的话，方便管理。当然也可以单独写！
注意：虽然模块被分出去了，但是每个module依然拥有自己的state, mutation, action
看如下代码：
首先在store文件夹中的index.js中再建一个modules.js文件，作为子模块，
然后再index.js文件中这样写
index.js文件：
在这里插入图片描述
分好模块后在其他vue文件中通过computed属性这样获取： this.store.state.模块名.属性名可以获取到。这里牵扯到modules的一个命名空间，有modules 之后，state 被限制到login 的命名空间（模块）下，所以属性名前面必须加模块名（命名空间）
modules.js文件：

export default {
	namespaced:true,   //开启命名空间
	state:{},
	mutations:{},
	actions:{},```
}			

最后加上一个vuex的一个官网地址: https://vuex.vuejs.org/zh/guide/.


> 坚持总会被听见！！！