首先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的使用方法以及信息的交流了。

Logo

前往低代码交流专区

更多推荐