Vuex的基本使用

原文:https://laylawang17.github.io/2020/03/11/Vuex%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/

在我们使用 Vue 搭建的 App 里,当访问数据对象时,一个组件实例只是简单的代理访问。当 App 结构复杂、组件较多时,如果有一处需要被多个实例共享的状态,可以简单的通过维护一份数据来实现共享,这就促成了我们对状态管理机制对需要,比如 Vuex。

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

原理

Vuex 是基于 Flux 架构的状态管理库。可以参考 理解 Flux 这篇文章先做一些基础对了解。Vuex 的核心思想就是store 模式,即:将需要共享的状态放在在 store 自身的 action 中管理

var store = {
  state: {...},
  action: {...}
};

则组件实例的 state 可以包含共享状态和私有状态两类

var vm = new Vue({
  data: {
    privateState: {},
    sharedState: {}
  }
});

store 和组件的关系如下图

<img src="http://ww1.sinaimg.cn/large/98792392ly1gconn3v15sj20xc0xcjrg.jpg" style="zoom:40%;" />

对于小型应用来说,我们使用简单的 store 模式就足以让我们的 App 内部变得简单明了,但是对于大型应用借助 Vuex 可能是更好的选择。

核心概念

  • Store:store 用来管理状态,包括数据和各种方法,由 state、getters、mutations、actions、plugins 组成
  • State:state 中定义了组件所有的状态
  • Getter:getter 可以看作是由 state 派生的“计算属性”
  • Mutations:包含真正实现 state 更新的业务逻辑
  • Action:定义更新 state 的动作,用于知会 mutation 何时处理变更

在使用 Vuex 的 App 中,当用户与 App 交互时发生的事情包括:

  • 启动 App 时,View 从 store 中获取所需的 state(以及 getters)
  • 用户进行输入、点击等操作时,View 发送(dispatch)相应的 action 给 store,action 中包含了操作类型及数据
  • action 会提交(commit)对应的 mutation
  • mutation 中完成真正的业务逻辑并更新 state
  • View 监听 state 的变化并重新渲染

基本使用

Store

创建 store

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  plugins
});

以简单的计数 App 为例:

const store = new Vuex.Store({
  // 状态
  state: {
    count: 0
  },
  // 注册mutation
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

从根组件注入 store

Vue.use(vuex);
const app = new Vue({
  el: '#app',
  store,
  component: {...},
  template: ...
});

State

在子组件中作为一个计算属性获取 state

computed: {
  count: function() {
    return this.$store.state.count;
  }
}

更简单的方法是使用 Vuex 提供的mapState()方法

computed: {
  ...mapState(['count'])
}

computed对象里还可以有组件私有的其他计算属性。

Getter

如 Todo List App 可能需要获得状态为 active 的 todo 列表:

const store = new Vuex.Store({
  state: {
    todos: [...]
  },
  getters: {
    activeTodos: state => state.todos.filter(todo => todo.active),
    // 接收其他getter作为第二个参数
    leftItems: (state, getters) => getters.activeTodos.length,
    // 定义可作为方法调用的带参getter
    getTodoById: state => id => state.todos.find(todo => todo.id === id)
  }
})

getters 在子组件中可作为计算属性访问

computed: {
  activeTodos: function() {
    return this.$store.getters.activeTodos;
  }
}

或者使用mapGetters()方法访问

computed: {
  ...mapGetters(['activeTodos', 'leftItems'])
}

Mutation

在 store 中注册包含载荷的 mutation

mutations: {
  increment (state, amount) {
    state.count += amount;
  }
}

注册的 mutation 都必须是同步函数,否则会导致状态的改变不可追踪。

提交 mutations

store.commit("increment");

提交带载荷的 mutations

store.commit("increment", { amount: 2 });
store.commit({
  type: "increment",
  amount: 2
});

在组件中提交 mutations

this.$store.commit("increment");

或者使用mapMutations()方法

methods: {
  ...mapMutations(['increment'])
}

Action

在 store 中注册 action

action: {
  increment (context) {
    context.commit('increment');
  }
}

action 函数接收的 context 参数与 store 实例具有相同的方法和 getters,因此可以通过context.statecontext.getters 来获取 state 和 getters,也可以调用 context.commit 提交一个 mutation。

action 和 mutation 的区别在于:

  • action 需要通过提交 mutation 来实现状态的更新
  • action 中可以包含异步操作,例如
// 假设 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData());
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA'); // 等待 actionA 完成
    commit('gotOtherData', await getOtherData());
  }
}

分发 action

store.dispatch("increment", { amount: 2 });
store.dispatch({
  type: "increment",
  amount: 2
});

在组件中则需要使用this.$store.dispatch(...)或者mapActions()方法:

methods: {
  ...mapActions(['increment'])
}

Plugin

plugin 中会暴露出每次 mutation 的钩子,用于中 mutation 之后做额外的处理,例如数据持久化等

const localStoragePlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
    localStorage.setItem("todos", JSON.stringify(state.todos));
  });
};

参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,927评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,111评论 0 6
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 726评论 0 3
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,010评论 4 111
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,658评论 7 61