vue的状态管理模式vuex


Posted in Javascript onNovember 30, 2017

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

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

链接

  1. vuex官方中文网站
  2. 使用vue和vuex实现的简易商城,仅供参考

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中,开发和调用方式稍微不同。

├── 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组件中使用时,我们通常会使用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很简单,多用几次就会熟悉了。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
jquery cookie的用法总结
Nov 18 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 #Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 #Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 #Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 #Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 #jQuery
写给小白看的JavaScript异步
Nov 29 #Javascript
3种vue组件的书写形式
Nov 29 #Javascript
You might like
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Django获取应用下的所有models的例子
2019/08/30 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Django框架models使用group by详解
2020/03/11 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
个人催款函范文
2015/06/24 职场文书
中秋节感想
2015/08/10 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL