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动态路由实现
如有不对请评论纠正,看完点个赞再走吧