Vue的学习与使用_05.Vuex的使用

1.Veux的配置

(1)Vuex原理

我们通过vuex官网上的图片来进行解析
绿色框中的三个部分都被装在store中,即会赋予每个Vue Component一个$store属性,通过这个属性可以访问三者中所有数据,但不能对其进行修改接下来开始分别介绍三者作用:1.state用于保存所有的全局变量,2.actions用于保存一些逻辑语句和方法,与后端进行部分交互3.mutations用于保存改变$state中数据的方法
除了这三者之外还有一个数据getters用于保存全局计算属性.
由于不能直接修改state中的数据,必须通过actions与mutations进行修改
(1)通过图可以看出vue component需要调用dispatch,即

vc.$store.dispatch("a",b)

其中参数a为actions中的函数名的字符串,b为传入的参数,如果要传入多个参数就传入一个数组.
vuex会自动在actions中寻找与a对应的函数,并传入参数
(2)然后在actions中找到的函数就会获得参数b,在这个函数中需要调用commit

a:function(context,value){
//判断语句或与后端交互语句等...
	context.commit("c",value);
}

context是迷你版的store,是vuex自动提供的,将store中可能在这里用到的数据汇总到context中,就可以用其调用commit函数,commit中的两个参数与dispatch类似,第一个是函数名,会自动寻找mutations中的函数,value还是dispatch传入的value.
(3)mutations中的内容

c:function(state,value){
	...
}

c中传入的参数有两个,第一个就是state,可以直接使用并修改其中的全局数据,第二个value还是传入的value.
因为actions中仅仅是流程控制语句与后端交互的数据,并不会直接对state中的数据进行更改,因此有时可以直接省略调用dispatch,直接调用commit,即vc直接与mutations连接.

(2)安装

在需要安装Vuex的项目中打开终端,输入
npm install vuex@3
注意要看清楚安装的地方是不是要用的项目,不要不小心安装到项目外了,此外注意要安装vuex3版本,
因为vuex3是对应vue2的,vuex4是对应vue3的,不匹配会报错

(3)设置框架

在src中创建一个文件夹,名字为store,里面添加一个文件文字为index.js
文件基本内容为

import Vue from "vue";
//在这里导入了Vuex,在main.js中就不需要引入vuex了,只需引入store即可
import Vuex from 'vuex';
Vue.use(Vuex);
//state用于保存全局的变量
const state={};
//actions用于保存一些逻辑,并且调用commit
const actions={};
//mutations中保存真正改变state中的数据的函数
const mutations={};
//选择是否使用getters
//const getters={};
//默认暴露
export default new Vuex.Store({
    state,actions,mutations,
    //getters
})

接着只需在main.js中导入

import store from "./store";

此时可以使用$store了

(4)map

①mapState

因为vc在使用$store时必须要写

this.$store.全局属性名

明显这里的大部分代码都是重复的,因此vuex提供了mapState,写在computed中

computed:{
//对象写法,类似于给全局属性起了一个别名,vc就可以直接使用别名了
	...mapState([别名:"全局属性名",别名:"全局属性名"...])
//数组写法,默认别名与全局属性名相同
	...mapState("全局属性名","全局属性名"...)
},

②mapGetters

与mapState用法一致

③mapActions

因为与actions对话时需要this.$store.dispatch(“函数名”,参数),每次都一样,因此vuex也提供了简化形式

//对象形式
...getActions({别名:"actions中的方法名",...})
//数组形式
...getActions(["actions中的方法名"...])

但是明显有地方有问题,即传入的只有方法名进行匹配,暴露出别名,参数并没有传入,这个问题实际上很好解决,因为暴露出的别名可以与actions中的方法直接匹配,因此在使用别名时直接传参即可

......@click="别名(value)"...

④getMutations

与getActions类似.

⑤注意

要使用map进行简化代码,必须在使用map的模块中导入,比如使用了mapState和mapMutations,则需

<script>
	import {mapState,mapMutations} from 'vuex';
	还有在new Vue时使用store

(5)Vuex模块化

当多个全局属性与方法产生时,放在一起会导致代码混乱,所以就产生了模块化的想法
那么就需要将state,actions,mutations与getter包裹起来,即index.js中可以这样写:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const 模块名1={
	state:{},
	actions:{},
	mutations:{},
	getters:{}
},
const 模块名2={
	state:{},
	actions:{},
	mutations:{},
	getters:{}
},
export default new Vuex.store({
	modules:{
		模块名1,模块名2...
	}
})

如果使用了map,自然可以直接修改template标签之间的内容,将每个全局数据前加上其模块名,即{{模块名1.属性别名}},此时就搞定了
但是考虑我们为什么使用map,就是因为使用map可以简化操作,给数据起别名,减少代码冗余,此时使用模块名调用别名还是会冗余,那么还有另一种方法可以使用
即在map中多传入一个参数放在第一个参数的位置,这个参数就是后面的属性的模块名

...mapState("模块名1",[别名:"模块1中的属性名"...])

此时还有最后一步,在几个模块中添加一个配置namespace

const 模块名={
namespace=true;
...
}

此时模块名才暴露出去,可以使用map简化代码.
注意这样写的话会导致map方法会写许多个,所以具体如何实现即看具体情况.