vuex详细介绍

Vuex概述

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

Vuex的基本使用

1.安装vuex依赖包

npm install vuex --save

2.在src文件新建store文件夹，里面新建一个index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {

}

const getters = {

}

const mutations = {

}

const actions = {

}

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})
------------------------------------------------
const moduleA = {
	state: {},
	mutation: {},
	actions: {},
	getters: {},
}
const store = new Vuex.Store({
    modules: {
		a: moduleA
	}
})
store.state.a 	//moduleA的状态
------------------------------------------------
//暴露store
export default store

3.在main.js将store对象挂载到vue实例中

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

Vuex的核心概念

• State

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

const store = new Vuex.Store({
    state: {
        count: 0
    }
})

• Mutation

用于变更Store中的数据

1.只能通过mutation变更Store数据,不可以直接操作Store中的数据

2.通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化

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

• Action

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

// 定义Action
const strore = new Vuex.Store({
    mutation: {
        add(state, step) {
            state.count += step
        }
    },
    actions: {
        addAsync(context, step) {
            setTimeout(() => {
                context.commit('add', step)
            }, 1000)
        }
    }
})

• Getter

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

1.Getter可以对Store中也有的数据加工处理之后形成新的数据,类型Vue的计算属性

2.Store中的数据发生变化,Getter的数据也会跟着变化

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

组件访问State数据的两种方式

• 第一种

this.$store.state.全局数据名称

• 第二种

// 从vuex中按需导入mapState函数
import { mapState } from 'vuex'

// 通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性
computed: {
    ...mapState({'count'})
}

组件修改State数据的两种方式

• 第一种

this.$store.commit('add',3)

• 第二种

// 从vuex中按需导入mapState函数
import { mapMutations } from 'vuex'

// 通过刚才导入的mapMutations函数,将需要的mutations函数,映射为当前组件的methods方法
methods: {
    ...mapMutations(['add'])
    this.add(3);
}

组件异步修改State数据的两种方式

• 第一种

this.$store.dispatch('add', 3)

• 第二种

// 从vuex中按需导入mapState函数
import { mapActions } from 'vuex'

// 通过刚才导入的mapActions函数,将需要的actions函数,映射为当前组件的methods方法
methods: {
    ...mapActions(['addAsync'])
    this.addAsync(3);
}

组件访问State数据的两种方式

• 第一种

this.$store.getters.名称

• 第二种

// 从vuex中按需导入mapState函数
import { mapGetters } from 'vuex'

// 通过刚才导入的mapActions函数,将需要的actions函数,映射为当前组件的methods方法
computed: {
    ...mapGetters(['shouNum'])
    this.mapGetters();
}

Vuex的案列

详细介绍