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/.
> 坚持总会被听见!!!