Vuex的学习记录，从入门到实战

为什么会有Vuex

VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

• 安装 Vuex 依赖包

npm install vuex  --save

• 导入 Vuex 包

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

• 创建store对象

const store = new Vuex.Store({
	// state 存放的是全局共享的数据
   state: { count: 0 },
   // mutations 用于变更state中的数据
   mutations: {  
   	addCount(state){
   		state.count ++
   	}
   },
   // actions 用于处理对state的值更改的异步操作
   actions: {
   	addCountAsync(context){
   		setTimeout(function(){
   			context.commit('addCount')
   		},1000)
   	}
   },
   //用于对Store中的数据进行加工处理形成新的数据,
   getters: {
   	showNum(state){
   		return "当前的count值为"+state.count
   	}
   }
})

• 将store对象挂载到Vue对象

new Vue({
	....
	....
	store
})

接下来，就可以使用 vuex了

简单介绍

1.State

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

访问State有两种方式

方法一: this.$store.state.变量名

方法二: (不明白三个点啥意思看这https://www.jianshu.com/p/d60800d5869b)

直接{{变量名}}
import { mapState } from 'vuex'
computed:{
	...mapState(['变量名'])
}

2.Mutation

因为官方说不允许组件直接修改state的值，是违法的，所有才有了Mutation,用于修改state中的数据

触发Mutation中的方法有两种方式

方式一： this.$store.commit(‘方法名’,可携带参数)

方式二:

直接方法名调用

import { mapMutations } from 'vuex'
method:{
	...mapMutations (['方法名'])
}

3.actions

在更改state的值中方法我们很可能会涉及异步操作，但如果用例如直接用setTimeout方法在mutations去异步更新的话，就会更改不到，所有就有了actions。用于处理对state的值更改的异步操作,但是对state的值更改还是要间接触发mutations中方法。

触发Mutation中的方法有两种方式

方式一： this.$store.dispatch(‘方法名’,可携带参数)

方法二：

直接方法名调用

import { mapActions } from 'vuex'
method:{
 ...mapActions (['方法名'])
}

4.Getter

用于对Store中的数据进行加工处理形成新的数据,不会改变state的数据，只是包装返回一个新的数据，他会随着state的变化而变化。

访问Getter有两种方式

方法一: this.$store.getters.方法名

方法二:

直接方法名调用

import { mapGetters } from 'vuex'
computed:{
	...mapGetters (['方法名'])
}

了解完上述知识，附上一个官方的图，再推荐一个方便你vue方法看到state的值变化的工具，浏览器插件（VueDevtool）

一键查询淘宝/拼多多内部优惠券，每日大额外卖红包，购物省钱的宝藏工具