Vuex的使用，绝对简单的讲解，看完就会

本文主要是介绍Vuex的使用，绝对简单的讲解，看完就会，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Vuex是什么？

官方解释为，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。简单点说，我认为Vuex就是为定义全局变量全局函数而生的东西。

如何使用

一般在vue项目中会有这样的文件夹

接下来讲一下这些文件的作用，modules这里一般存储所有的方法，新建了文件需要在index.js里声明一下，getters.js是get方法，用于获取vuex下变量的值

废话不多说，具体如何使用如何编写，上代码

首先，这个文件夹要生效，就需要声明到main.js里。

main.js

import store from './store'

new Vue({
	store,
})

然后是index.js，这里就随便举个例子，之后要注册就和这里user的写法相似就行，先import声明然后vuex.store中调用

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user,
  },
  getters
})

export default store

紧接着就是modules文件夹下的文件写法，这里以user为例

modules/user.js

const user = {
	state: {//声明全局参数
		user:''
	},
	mutations: {//set方法,存储时使用--->>this.$store.commit('SET_USER',值)
		SET_USER(state,user){
			state.user = user
		}
	},
	//getters: {},//get方法,一般不用,在getters文件中声明即可
	actions: {//全局函数
		GetInfo({ commit, state }) {
			return new Promise((resolve, reject) => {
				//一般调用接口请求
				getInfo(state.token).then(res => {
					commit('SET_USER', res.user)
					resolve(res)//传递出去的参数,传递多个可用数组eg:resolve([res.user,res.code])
				}).catch(error => {
					reject(error)
				})
			})
		},
	},
	//modules:{}//引入其他的modules,一般在index中使用
}
export default user

最后，就是getters.js文件，这个文件主要是获取变量的值，具体调用$store.getters.user

getters.js

const getters = {
	user: state => state.user.user,
}
export default getters

store下的文件说完了，接下来就是如何调用的问题了

Vuex内变量和函数的调用

一、在组件中调用

1、获取值和函数

方法一

获取值：

取在getters.js文件中声明过的

this.$store.getters.user

如果没在getters.js中声明过，可以通过这种方法直接获取

this.$store.state.文件名.变量名
例如：
this.$store.state.user.user

直接可以获取变量值，如果在template下则去掉this.即可

调用函数：

this.$store.dispatch('函数名',传入参数).then(传来参数 => {})
例如：
this.$store.dispatch('GetInfo',传入参数).then(res => {
	console.log(res)
})

方法二

//首先引入mapState和mapActions
import { mapState, mapActions } from "vuex";

computed: {
    // 利用辅助函数 获取state中的数据
	...mapState("user", ["user"]),
},
methods: {
    // 辅助函数 来获取actions中的方法
    ...mapActions("user", ["GetInfo"]),
}

声明完后使用，变量直接this.user，函数直接this.GetInfo()，在template下则去掉this.即可

2、存入值

this.$store.commit('SET_USER',值)

二、在js文件中调用

首先引入store

import store from '@/store'

然后调用

store.getters.user				//读取getters下的变量值
store.state.文件名.变量名		//读取指定文件下state下的变量的值
store.commit('SET_USER',值)		//存入值
store.dispatch('函数名',传入参数).then(传来参数 => {})	//action下函数调用

最后

最常用的vuex大概到这里就结束了，使用谷歌vue插件可以更好的观察vuex中变量的变化。附上vuex例子：vue动态路由实现

如有不对请评论纠正，看完点个赞再走吧

这篇关于Vuex的使用，绝对简单的讲解，看完就会的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！