vuex的信息交流
首先vuex是一个状态管理器,当我们的项目比较大时,组件之间的信息传递会显得特别混乱,这是我们就可以用vuex来管理我们的状态,vuex有自己的信息交流规则。vuex分为以下几个部分:•state•mutations•getters•actions•modules其中所有的文件都在store文件夹下,store文件夹是vuex的核心。state 里面存放所有的状态,也就是我们会用到的所有会改变的
首先vuex是一个状态管理器,当我们的项目比较大时,组件之间的信息传递会显得特别混乱,这是我们就可以用vuex来管理我们的状态,vuex有自己的信息交流规则。
vuex分为以下几个部分:
•state
•mutations
•getters
•actions
•modules
其中所有的文件都在store文件夹下,store文件夹是vuex的核心。
state 里面存放所有的状态,也就是我们会用到的所有会改变的变量名的初始值。
mutations 里面存放一些方法,如何更改状态的规则
getter 就是从state中派生出来的方法,如果我们需要state中的一下特定的值,可以在getters中写入方法,获取到我们想要获取到的特定的一些值(比如要长度大于10的字符串)
actions是mutations的加强版,他的使用是依赖于mutations的,通过commit mutations中的方法来改变状态,可以异步操作。
modules 模块化 可以将getters、mutations等文件独立出来,最后在index.js文件中引入。
接下来是一个例子,之前的直播间项目的一些代码片段
我们把各个组件中的所有状态都写在了store文件夹下的index.js文件的state中:
state:{
isLogin: [],
//用户信息
userInfo:{}
...
}
如果我们想改变state中的用户信息,我们肯定要有途径解决这个问题,vuex规定我们需要在mutations里面定义方法来执行这件事,并且要传入两个参数,第一个是state,第二个是组件传回的值:
mutations:{
setLogin ( state , payload) {
state.isLogin = payload;
//用户信息
[type.USER_INFO] ( state , info){
state.userinfo = info;
...
}
某个时间,我们需要获取到state中的一些特定的经过处理的数据,可以用到getters:
getters : {
trueLogin(state) {
return state.isLOgin.value() > 7;
}
这样我们就获取到了state中的isLogin大于7的值。
如果我们想在事件发生3秒后改变用户的信息,那么就要用到actions,因为actions可以处理异步操作:
actions:{
userIngoChange({commit}, data){
setTimeout(function(){
commit("[type.USER_INFO]",data);
},3000);
}
},
mudules:模块出来,这个直播间项目的store目录是这样的
然后在indecx.js文件中是这样需要引入,与vue的模块引入方式相同:
在子文件中:export default
在index中:import getters from './getters';
在index.js中我们需要这样做,才能使用vuex:
import Vue from 'vue';
import Vuex from 'vuex';//引入vuex文件
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
//告诉vue使用vuex
Vue.use(Vuex);
//注册全局组件
export default new Vuex.Store({
state:{..},
actions,
getters,
mutations,
});
接下来要在入口文件,一般是src文件夹下的index.js文件引入并注册:
import Vue from 'vue';
import { mapActions, mapGetters, mapMutations } from 'vuex';
import store from './store';
new Vue({
el: '#app',
store,
...
})
这基本上就是一个项目中vuex的使用方法以及信息的交流了。
更多推荐
所有评论(0)