Vuex 基本使用 (附 todolist_demo)

vuex 概述

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

优点 :

• 能够在 vuex 中集中管理共享的数据, 易于开发和后期维护
• 能够高效地实现组件之间的数据共享 , 提高开发效率
• 存储在 vuex 中的数据都是响应式的 , 能够实时保持数据与页面的同步

什么样的数据适合存储到 vuex 中

一般情况下 , 只有组件之间共享的数据 , 才有必要存储到 vuex 中 ; 对于组件中私有数据 , 依旧存在组件自身的 data 中即可

vuex 基本使用

安装 vuex 依赖包

            npm install vuex --save

        

导入 vuex 包

            import vuex from ‘vuex‘
Vue.use(vuex)

        

创建 store 对象

            const store = new Vuex.Store({
	// state 中存放的就是全局共享的数据
	state: { count: 0 }
})

        

将 store 对象挂载到 vue 实例中

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

        

Vuex 核心概念

State

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

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

    

组件访问 State 中数据

        // 第一种 this.$store.state.共享数据名称
this.$store.state.count

// 第二种
// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from ‘vuex‘
// 通过导入的 mapState 函数, 将当前组件需要的全局数据, 映射为当前组件的 computed 计算属性
computed: {
    ...mapState([‘count‘])
}

    

Mutation

Mutation 用于变更 Store 中的数据 , 不要在 Mutation 中执行异步操作

• 只能通过 mutations 变更 Store 数据 , 不可以直接操作 Store 中的数据
• 通过这种方式虽然操作起来稍微繁琐一些 , 但是可以集中监控所有数据的变化

        // 定义 mutation
const store = new Vuex({
	state: {
		count: 0
	},
	mutations: {
        // 普通函数
		add(state) {
			// 变更状态
			state.count++
		},
        // 带有参数
        addN(state, step) {
            state.count += step
        }
	}
})

    

组件中访问 mutation 方法

        import { mapMutations } from ‘vuex‘
methods: 
	// 第二种 将 mutation 函数映射为当前组件的 methods 方法
	...mapMutations([‘add‘, ‘addN‘]),
	handle() {
		// 触发 mutation 的第一种方式
		this.$store.commit(‘add‘)
		this.$store.commit(‘addN‘, 5)
	},
	handle2() {
		this.add()
        this.addN(5)
	}
}

    

Action

Action 用于处理异步任务

如果通过异步操作变更数据 , 必须通过 Action , 而不能使用 Mutation , 但是在 Action 中还是要通过触发 Muation 的方式间接变更数据

        // 定义 actions
const store = new Vuex.Store({
	mutations: {
		add(state) {
			state.count++
		}
	},
	// 在actions中, 不能直接修改 state 中的数据
	// 必须通过 context.commit() 触发某个 mutations 才行
	actions: {
		addAsync(context) {
			setTimeout(() => {
				context.commit(‘add‘)
			}, 1000)
		},
		addNAsync(context, step) {
			setTimeout(() => {
				context.commit(‘add‘, step)
			})
		}
	}
})

    

触发 Actions 的方式

        import { mapActions } from ‘vuex‘
methods: {
	...mapActions([‘addAsync‘, addNAsync])
	// 第一种
	handle() {
		// 这里的 dispatch 函数是专门触发 actions
		this.$store.dispatch(‘addAsync‘)
		this.$store.dispatch(‘addNAsync‘, 5)
	},
	handle1() {
		this.addAsync()
		this.addNAsync(5)
	}
}

    

Getter

Getters 用于对 Store 中的数据进行加工处理成新的数据 , 他并不会修改 Store 中的数据

• Getters 可以对 Store 中已有的数据加工处理之后形成新的数据 , 类似于 Vue 中的 computed 属性
• Store 中数据 发生变化 Getters 的数据也会跟着变化

        const Store = new Vue.Store({
	state: {
		count: 0
	},
	getters: {
		showData(state) {
			return `当前的最新的数量够为: ${state.count}`
		}
	}
})

    

使用 Getters 的方法

        // 第一种 this.$store.getters.数据
this.$store.getters.count
// 第二种
import { mapGetters } from ‘vuex‘
computed: {
	...mapGetters(‘showData‘)
}

    

原文：https://www.cnblogs.com/article-record/p/13069897.html