当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue的状态管理模式vuex

vue的状态管理模式vuex

2017年12月08日  | 移动技术网IT编程  | 我要评论

中国教育风险预控网,电脑论坛网,万方科技学院教务处

vuex是一个专门为vue.js设计的状态管理模式，并且也可以使用devtools进行调试。

备注：本文的示例等代码将会采用es6的语法。

链接

vuex是什么？

先引用vuex官网的话：

vuex 是一个专为 vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

状态管理模式、集中式存储管理 一听就很高大上，蛮吓人的。在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件中供其他组件使用。这么说吧，将vue想作是一个js文件、组件是函数，那么vuex就是一个全局变量，只是这个“全局变量”包含了一些特定的规则而已。

在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，不过在使用vuex之后也带来了更多的概念和框架，需慎重！

vuex里面都有些什么内容？

talk is cheap,show me the code. 先来一段代码间隔下这么多的文字：

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. modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

vue-cli中使用vuex的方式

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

├── 
├── 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组件中使用时，我们通常会使用mapgetters、mapactions、mapmutations，然后就可以按照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很简单，多用几次就会熟悉了。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网