【Vue 极速指南】Vuex 篇

在这篇文章，你将快速学习到：

• 如何安装
• 什么是 Vuex
• Hello World
• 核心概念
  • State
    • mapState Helper
  • Getters
    • mapState Helper
  • Mutations
  • Actions
  • Modules

如何安装

• 标准安装
  • 开发版
• npm install vuex

什么是 Vuex

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

Hello World

• 引入 vue.js & vuex.js
• 创建 index.html
• 创建 Vuex.Store(): store = new Vuex.Store({})
• 提交变化: store.commit('increment')

核心概念

State

• 创建 Vuex.Store()
• 定义 state.count: { state: { count: 0 }}
• 在组件中使用: this.$store.state.count

    
    
    
    
    



    

        {{ count }}
    
    

Getters

• 创建 Vuex.Store()
• 声明 getters.doneTodos: { getters: { doneTodos: ... }}
• 在组件中使用: this.$store.getters.doneTodos

    
    
    
    
    



    

        {{ doneTodos }}
    
    

Mutations

• 创建 Vuex.Store()
• 声明 mutations.increment: { mutations: { increment: function(){} }}
• 在组件中使用: this.$store.commit('increment')

    
    
    
    
    



    

        {{ count }}
        increment
    
    

Actions

• create Vuex.Store()
• 声明 actions.increment: { actions: { increment: function(){} }}
• 在组件中使用: this.$store.dispatch('increment')

    
    
    
    
    



    

        {{ count }}
        increment
    
    

Modules

• 创建 moduleA & moduleB
• 在两个模块中创建 Vuex.Store() : new Vuex.Store({modules: {a: moduleA,b: moduleB}})
• 在组件中使用: this.$store.state.a

〖坚持的一俢〗