Vuex内容解析和vue cli项目中使用状态管理模式Vuex

Posted 古兰精

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex内容解析和vue cli项目中使用状态管理模式Vuex相关的知识,希望对你有一定的参考价值。

  中文文档:vuex官方中文网站

一、vuex里面都有些什么内容?

const store = new Vuex.Store({
    state: {
        name: weish,
        age: 22
    },
    getters: {
        personInfo(state) {
            return `My name is ${state.name}, I am ${state.age}`;
        }
    }
    mutations: {
        SET_AGE(state, age) {
            commit(age, age);
        }
    },
    actions: {
        nameAsyn({commit}) {
            setTimeout(() => {
                commit(SET_AGE, 18);
            }, 1000);
        }
    },
    modules: {
        a: modulesA
    }
}

  这个就是最基本也是完整的vuex代码:

  vuex 包含有五个基本的对象:

  1、state:存储状态,也就是全局变量;

  2、getters:派生状态。也就是set、get中的get,有两个可选参数:state、getters,分别可以获取state中的变量和其他的getters。外部调用方式:store.getters.personInfo(),就和vue的computed差不多;

  3、mutations:提交状态修改。也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state,外部调用方式:store.commit(‘SET_AGE‘, 18),和vue中的methods类似。

  4、actions:和mutations类似,不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式:store.dispatch(‘nameAsyn‘)

  5、modulesstore的子模块,内容就相当于是store的一个实例。调用方式和前面介绍的相似,只是要加上当前子模块名,如:store.a.getters.xxx()

二、vue-cli中使用vuex的方式

  一般来讲,我们都会采用vue-cli来进行实际的开发,在vue-cli中,开发和调用方式稍微不同。

├── index.html
├── main.js
├── components
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 根级别的 state
    ├── getters.js        # 根级别的 getter
    ├── mutation-types.js # 根级别的mutations名称(官方推荐mutions方法名使用大写)
    ├── mutations.js      # 根级别的 mutation
    ├── actions.js        # 根级别的 action
    └── modules
        ├── m1.js         # 模块1
        └── m2.js         # 模块2

  state.js示例:

const state = {
    name: weish,
    age: 22
};

export default state;

  getters.js示例(我们一般使用getters来获取state的状态,而不是直接使用state):

export const name = (state) => {
    return state.name;
}

export const age = (state) => {
    return state.age
}

export const other = (state) => {
    return `My name is ${state.name}, I am ${state.age}.`;
}

  mutation-type.js示例(我们会将所有mutations的函数名放在这个文件里):

export const SET_NAME = SET_NAME;
export const SET_AGE = SET_AGE;

  mutations.js示例:

import * as types from ./mutation-type.js;

export default {
    [types.SET_NAME](state, name) {
        state.name = name;
    },
    [types.SET_AGE](state, age) {
        state.age = age;
    }
};

  actions.js示例(异步操作、多个commit时):

import * as types from ./mutation-type.js;

export default {
    nameAsyn({commit}, {age, name}) {
        commit(types.SET_NAME, name);
        commit(types.SET_AGE, age);
    }
};

  modules--m1.js示例(如果不是很复杂的应用,一般来讲是不会分模块的):

export default {
    state: {},
    getters: {},
    mutations: {},
    actions: {}
};

  index.js示例(组装vuex):

import vue from vue;
import vuex from vuex;
import state from ./state.js;
import * as getters from ./getters.js;
import mutations from ./mutations.js;
import actions from ./actions.js;
import m1 from ./modules/m1.js;
import m2 from ./modules/m2.js;
import createLogger from vuex/dist/logger; // 修改日志

vue.use(vuex);

const debug = process.env.NODE_ENV !== production; // 开发环境中为true,否则为false

export default new vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        m1,
        m2
    },
    plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改
});

  最后将store实例挂载到main.js里面的vue上去就行了

import store from ./store/index.js;

new Vue({
  el: #app,
  store,
  render: h => h(App)
});

  在vue组件中使用时,我们通常会使用mapGettersmapActionsmapMutations,然后就可以按照vue调用methods和computed的方式去调用这些变量或函数,示例如下:

import {mapGetters, mapMutations, mapActions} from vuex;
/* 只写组件中的script部分 */
export default {
    computed: {
        ...mapGetters([
            name,
            age
        ])
    },
    methods: {
        ...mapMutations({
            setName: SET_NAME,
            setAge: SET_AGE
        }),
        ...mapActions([
            nameAsyn
        ])
    }
};

  以上就是 vuex 的相关知识,其实vuex很简单,多用几次就会熟悉了。

以上是关于Vuex内容解析和vue cli项目中使用状态管理模式Vuex的主要内容,如果未能解决你的问题,请参考以下文章

一文解析Pinia和Vuex,带你全面理解这两个Vue状态管理模式

Vue笔记(Vuex全局状态管理器)

vue状态管理模式vuex

Vue.js中学习使用Vuex详解

VUE学习笔记:28.脚手架vue-cli之vuex

Vuex ~ 专门为vue.js设计的集中式状态管理架构