vuex初步理解

vuex????

1.什么是vuex

首先可以把vuex简单理解为一个仓库,可以让我们更方便更简洁的写出页面中的功能,它把一些公共的状态抽离出来,统一管理,形成一个集中响应的效果

vuex是一个专门为vue.js应用程序开发的一个全局状态管理工具,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的状态发生变化

(1) 状态管理模式包括以下几个部分?

  • .state ( 数据源载体 ),它类似vue中的状态,但是state不允许直接被修改,只允许定义一些事件进行触发更改mutation
  • .getters ( 用于改变和过滤state的值 ),它类似于vue中的computed计算属性
  • .action ( 异步逻辑都应该封装到 action 里面,用commit提交,提交的是mutation ),每个action都有一个事件类型和一个回调函数,action不能直接修改数据,只能调用mutation,也就是说action存放异步操作的数据,再去触发mutation间接修改state。
  • .mutation 唯一可以提交,可以改变state的状态,也就是数据的属性值
  • .modules 拆分成多个模块儿
  • vuex初步理解
2.什么情况下使用vuex

vuex可以帮我们管理共享状态,并附带了更多的概念和框架。
如果你不打算开发大型的单页项目,或者说你的应用足够简单,那么就不需要使用vuex,因为vuex可能是繁琐的,但是如果你要开发的项目是一个中大型的,要考虑如何在组件外边更好的管理状态,就需要使用vuex了。

3.怎样下载vuex

npm方式: npm install vuex --save
yarn方式:yarn add vuex

4.怎样配置仓库

在src文件夹下新建一个store文件夹,在store文件夹下新建一个index.js文件,在index.js文件中引入
vuex初步理解

5.怎样使用vuex

先下载好,下载的代码参考上面第三条,接下来参考上面第四条,然后再main,js中引入store

6.vuex中的辅助函数

辅助函数就是用来引入vuex的数据和方法的,可以让我们操作起来更简洁

引入辅助函数:import { mapState,mapMutations,mapGetters,mapActions } from “vuex”

7.modules命名空间的处理

我们在多人协作的时候就可能要使用到modules模块,那么该如何使用呢,首先先在新建一个js文件,然后在里面写入vuex初步理解
然后在你原本的store仓库下的index.js文件中引入这个新的js文件,并在modules中写入这个文件夹的名称,然后我们就可以在我们的vue页面中写了,写的结构可以参考以下这个vuex初步理解
里面的person就是我新建的js文件,…mapMutations( ‘模块名’ ),{‘定义一个方法名’,‘仓库里的方法名’})