前言
今天说一下Vuex的状态管理,自我感觉像他像是JAVA的static,全局可以调用,且独一份,这里说的独一份指的是在读取数据时,如果某个页面对该数据做了修改,那么其他页面就会读取到修改之后的值。每个vue页面均可调用Vuex里的属性和函数。
概念
vuex的五个重要概念:
1、state:作用是像是声明一个全局变量,可以供所有vue使用的一个属性。仅有一份,如果在一个vue里改变属性值, 另一个vue里可以获取到改变后的值。
2、getters:优美的获取state的变量,其作用是获取state的值,但是还有一个重要的作用,缓存效果:若第二次调用 getters,无需执行getters里的函数。
3、mutations:作用是修改state值,一般情况下不会直接修改。
4、actions:作用是辅助mutations修改state值,此时需要actions提交mutations的方法,可以传参。
5、modules:作用:将store分模块管理,每个模块拥有独立的state、getters、mutations、actions、modules。
总结:
- state:全局变量
- getters:获取变量
- mutations:修改变量(建议不要直接做修改)
- actions:辅助mutations间接修改变量
- modules:分模块管理
准备工作
一、安装:
终端:npm install vuex
二、配置:
打开main.js添加如下配置:
1、引入
2、vue使用vuex
3、导出
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
Vuex的文件夹
一般情况下,在创建vue项目时勾选vuex时会自动配置vuex,只需要使用即可,目录如下图:
- index.js
import Vue from "vue";
import Vuex from "vuex";
import homes from './module/home'
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {//分模块儿管理
homes
}
});
- home.js
const state={
user:'',//记录用户
}
const getters={
getUser(state){//获取
return state.user;
},
}
const mutations={//直接修改,不提倡
setUser(state,user){
state.user=user
},
}
const actions={//间接修改
takeUser({commit},user){
commit("setUser",user)
},
//或者
takeUser1(conext,user){
conext.commit("setUser",user)
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
基本使用方法
使用方法:
1、利用辅助函数调用
2、直接调用
辅助函数
mapGetters:获取state的值
mapActions:调用vuex里的修改state的函数
一般情况下,这两个辅助函数最常用,也有mapState,mapMutations,但是根据vuex的规则,state不可以直接获取和修改。所以不是很适用。
import {mapGetters,mapActions} from 'vuex'
export default{
name:'',
computed:{
...mapGetters('home',['getUser']),
//还可以这样写
//...mapGetters('home',{user:'getUser'}),
//使用时正常使用。如获取user的值:this.getUser或this.User
},
methods:{
...mapActions('home',['takeUser']),
//还可以这样写
//...mapActions('home',{changeUser:'takeUser'}),
//使用时,正常调用即可,如,要改变值,this.getUser()或this.changeUser()可传参
}
}
直接调用
也可以直接调用vuex的属性和函数,如下:
export default{
name:'',
computed:{
user(){
//或者:this.$store.getters['home/getUser']
//home:module类型
//getUser:home里的getUser获取state的方法
return this.$store.state.home.user;
}
},
}
注意:在给actions传参时,只能传一个,如果像传多个值,那就将值写到一个对象里,如下:
export default{
methods:{
let results={
user:this.user,
course:this.course
};
this.$store.actions.home.tabkeUser(results);
}
}