Vuex 概述

Vuex是什么

Vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间的数据共享

1. 使用Vuex的好处

易于开发和后期维护
提高开发效率
实时保持数据与页面的同步

2. Vuex的基本使用

2.1 安装vuex依赖包

1	npm install vuex --save

2.2 导入vuex依赖包

1
2
3

import Vuex from 'vuex'

Vue.use(Vuex)

2.3 创建store对象

const store = new Vuex.store ({

    // state 中存放的就是全局共享的数据

    state : { count : 0 }
})

2.4 将store对象挂载到vue实例中

new Vue({
    el: '#app',
    render: h => h(app),
    router,
    // 将创建的共享数据对象，挂载到 Vue 实例中
    // 所有的组件，就可以直接从 store 中获取全局的数据了
    store
})

3. Vuex的核心概念

vuex中的核心概念如下:

State：提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储

// 创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
    state: { count: 0 }
})

Mutation：Mutation用于变更Store中的数据

// 定义 Mutation
const store = new Vuex.Store({
    state: {
        count: 0
    }，
    mutations: {
        add(state) {
            // 变更状态
            state.count++
        }
    }
})

Action：触发actions异步任务时携带参数

// 定义Action
const store = new Vuex.Store({
    // ...省略其他代码
    mutations: {
        addN(state,step) {
            state.count += step
        }
    },
    actions: {
        addNAsync(context,step) {
            setTimeout(() => {
                context.commit('addN', step)
            },1000)
        }
    }
})

// 触发Action
methods: {
    handle() {
        // 在调用 dispatch函数，
        // 触发 actions 时携带参数
        this.$store.dispatch('addNAsync', 5)
    }
}

Getter：Getter用于对Store中的数据进行加工处理形成新的数据

// 定义Getter
const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        showNum: state => {
            return '当前最新的数量是【'+ state.count +'】'
        }
    }
})