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)

Vuex的学习记录,从入门到实战_第1张图片

你可能感兴趣的:(前端)