我们知道vue是组件式开发的,当你的项目越来越大后,每个组件背后的数据也会变得越来越难以理顺,

这个时候你就可以考虑使用vuex了。

备注: 官方建议小项目不要使用,引入vuex会带来新的概念和模式,这对于新手而言理解上本身有难度,而且小项目中vuex发挥的功效确实不怎么明显,

反而增加了开发难度,就像后端项目中常说的 过度设计。

说了这么多,下面介入正题(以下讲解需要一个空的vue项目,推荐使用 vue-cli 创建,快速搭建一个vue开发环境 ):

vuex的作用就是作为一个数据仓库(store),把多个组件的背后的数据都放到store中,然后所有组件通过约定的方式去读取数据和修改数据。

这一句话就概括完了。没有想象的那么复杂。注意,这句话里面一个关键词叫 约定,下面来说说有那些约定:

在将约定之前,首先还是要知道怎么定义一个仓库(store),进入项目然后  vue add vuex 。

通过这条命令,vue-cli 帮我们创建了一个 store.js 的文件,并自动在根组件中引入了store,具体变化如下:

main.js 文件中自动变化了两处

import Vue from 'vue'
import App from './App.vue'
import store from './store' #【引入store文件】 Vue.config.productionTip = false new Vue({
store, #【在根组件中引入了store】
render: h => h(App)
}).$mount('#app')

现在我们编辑一下 store.js 文件:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: {
name: '张三', sex: '男'
}
},
mutations: {
change_name (state,payload) {
state.user.name = payload.new_name
},
change_sex (state,payload) {
state.user.sex = payload.new_sex
}
},
actions: {
change_sex_by_action (context,payload) {
setTimeout(() => {
context.commit('change_sex',payload)
},3000)
}
}
})

理解:

  state 是状态(数据中心)。

  mutations 里面定义的函数用来修改state,mutation只能执行同步操作。

  actions 的目的也是更改state,但是他不像mutation一样可以直接更改state,而是通过调用mutation来更改state。还有一个不同点是,action可以执行异步操作,比如网络请求。

  getters 返回组装DIY后的数据,比如state有个sex=“女”,通过getter在后面加一个 生 ,返回 女生,但是我觉得把组件中 computed 干的事情放到store层不是一个好主意,所以本例中不涉及。

用法:

  mutation的一个参数是 state,第二个参数是从 组件传过来的参数对象,

  action的第一个参数是一个与 store 实例具有相同方法和属性的 context 对象,这句话有点难以理解,你就把context想象成一个新的store对象,

  第二个参数还是 组件传过来的参数对象

在编辑一下 App.vue 文件

<template>
<div id="app">
<button @click="change_name">change name by mutation</button>
<p>current name({{ user.name }})</p>
<button @click="change_sex">change sex by action</button>
<p>current sex({{ user.sex }})</p>
</div>
</template>
<script>
export default {
data () {
return {
// user: this.$store.state.user
}
},
computed: {
user() {
return this.$store.state.user
}
},
methods: {
change_name() {
this.$store.commit({
type: 'change_name',
new_name: '李四'
})
},
change_sex() {
this.$store.dispatch({
type: 'change_sex_by_action',
new_sex: '女'
})
}
}
}
</script>

通过store获取数据都要放到computed里面,虽然在其他地方也可以直接获取,但是无法监听数据变动(就像上面注释的一样)。

change_name是通过mutation方式同步更改store中的数据,change_sex采用了action方式异步更改store中的数据。

如果在computed中需要获取的数据很多,可以使用 官方提供的 mapState,具体用法查看官方 文档 。

我自己的理解:

不要滥用store,不要把所有的数据都放到store中,在组件化开发思想下,我认为组件和组件之间本就应该独立封装,

如果一个数据只有在某个组件中使用,而不需要被其他组件共享,那么最好不要放到其中,store只存储有必要的数据,不要让他变得太臃肿,否则麻烦迟早会来。

官方文档中说明,如果store太大可以采用模块方式分割,但貌似不太优雅,

最后我还是推荐store只放必要的东西,不要让他变得太肥胖。

Vue中的状态管理器 - Vuex的更多相关文章

  1. vue - 状态管理器 Vuex

    状态管理 vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.

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

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  3. 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用

    一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图.    Store     ...

  4. 对于React各种状态管理器的解读

    首先我们要先知道什么是状态管理器,这玩意是干啥的? 当我们在多个页面中使用到了相同的属性时就可以用到状态管理器,将这些状态存到外部的一个单独的文件中,不管在什么时候想使用都可以很方便的获取. reac ...

  5. vue状态管理器(用户登录简单应用)

    技术点:通过vue状态管理器,对已经登录的用户显示不同的页面: 一  vue之状态管理器应用 主要用来存储cookie信息 与vue-cookies一起使用 安装:npm install vue-co ...

  6. VueX状态管理器 的应用

    VueX状态管理器 cnpm i vuex axios -S 1 创建Vuex 仓库 import Vue from 'vue' import Vuex from 'vuex' vue.use(Vue ...

  7. Vue状态管理模式---Vuex

    1. Vuex是做什么的? 官方解释: Vuex 是一个专为Vue.js 应用程序开发的 状态管理模式 它采用 集中式存储管理 应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化 ...

  8. JAVA中GridBagLayout布局管理器应用详解

    很多情况下,我们已经不需要通过编写代码来实现一个应用程序的图形界面,而是通过强大的IDE工具通过拖拽辅以简单的事件处理代码即可很轻松的完成.但是我们不得不面对这样操作存在的一些问题,有时候我们希望能够 ...

  9. (转)Python中的上下文管理器和Tornado对其的巧妙应用

    原文:https://www.binss.me/blog/the-context-manager-of-python-and-the-applications-in-tornado/ 上下文是什么? ...

随机推荐

  1. 《Unity3D/2D游戏开发从0到1》正式出版发行

    <Unity3D/2D游戏开发从0到1>正式出版发行 去年个人编写的Unity书籍正式在2015年7月正式发行,现在补充介绍一下个人著作.书籍信息:      书籍的名称: <Uni ...

  2. 并发系列(4)之 AbstractQueuedSynchronizer 源码分析

    本文将主要讲述 AbstractQueuedSynchronizer 的内部结构和实现逻辑,在看本文之前最好先了解一下 CLH 队列锁,AbstractQueuedSynchronizer 就是根据 ...

  3. 你所忽略的DNS---DNS实战及深度解读

    很多人没有dns的概念,或者仅仅知道dns负责解析从域名到ip地址,这对普通人来说,也许是够的,但对于开发者来说,就远远不够了. 很多中高级开发者的眼中的DNS是这样的(以百度为例): 读取hosts ...

  4. SAMBA服务和FTP服务讲解(week3_day1)--技术流ken

    samba服务 Smb主要作为网络通信协议; Smb是基于cs架构: 完成Linux与windows之间的共享:linux与linux之间共享用NFS 第一步:安装samba [root@ken ~] ...

  5. DSAPI 菜单渲染

    在本节,将演示DSAPI.菜单渲染功能.本功能支持对WINFORM菜单项的任意细节进行处理,使用配色方案进行渲染,默认配色方案为Visual Studio2012的黑色主题风格. 我们先来看一下未使用 ...

  6. 关于C#的new与override

    先放出来两个基类和派生类: public class BaseClass { public virtual void Method1(string desc) { Console.WriteLine( ...

  7. 分布式系统唯一ID的生成方案讨论

    在分布式系统下唯一id问题,就是id咋生成?比如分表分库,因为要是一个表分成多个表之后,每个表的id都是从1开始累加自增长,那是不对的.举个例子,一个表拆分为了2张表,每个表的id都从1开始累加,这个 ...

  8. jsp内置对象-config对象

    1.概念:config对象中存储了一些Servlet初始化的数据结构,当Servlet初始化时,JSP容器通过config对象将这些信息传递给这个Servlet.一般在web.xml文件中配置Serv ...

  9. MySQL索引初探

    一.什么是索引? 帮助数据库系统实现高效获取数据的数据结构 索引可以帮助我们快速地定位到数据而不需要每次搜索的时候都遍历数据库中的每一行. 二.常见实现方式有哪些? 常见索引模型有三种:哈希表.有序数 ...

  10. 扫码下单支持同桌单人点餐FAQ

    一.使用场景 满足较多商户希望同一桌台,各自点各自的菜品的业态场景(例如杭味面馆,黄焖鸡米饭店,面馆等大多数轻快餐店) 二.配置步骤及注意事项 管理员后台配置--配置管理--店铺配置--扫码点餐tab ...