Vue笔记十一：Vuex基础应用

getters

作用：类似于过滤器，数据输出之前可以操作数据
案例：在组件中输出num之后，拼接字符“元”
在store文件夹的index.js的vuex代码：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var store=new Vuex.Store({
	state:{
		// state相当于data
		num:110
	},
	getters:{
		// 1.定义方法，传入state
		newnum(state){
			// 2.将新数据return出去
			return state.num+'块钱'
		}
	}
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在helloworld中：

 <h1>{{$store.getters.newnum}}</h1>
1

就可以看见：

经过这个示例可以看出：
getter和state是平级的，并且getters可以过滤state的数据

mutations

作用：修改vuex中state的属性数据
示例：单击页面中的按钮，实现自增并且，vuex中的数字也会被修改
在store文件夹的index.js的vuex代码：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var store=new Vuex.Store({
	state:{
		// state相当于data
		num:110
	},
	getters:{
		// 1.定义方法，传入state
		newnum(state){
			// 2.将新数据return出去
			return state.num+'块钱'
		}
	},
	mutations:{
		// 1.定义方法，传入state
		getAdd(state){
			// 2.实现自增
			state.num++
		}
	}
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

helloworld.vue代码：

<template>
  <div class="hello">
	  <h1>{{$store.getters.newnum}}</h1>
	  <input type="text" :value="$store.state.num" />
	  <input type="button" value="+1" @click="addnum" />
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
  	return{};
  },
  methods:{
	addnum(){
		this.$store.commit('getAdd')
	}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

经过示例可以看出，点击按钮，触发mutations的方法，使得数字自增

mutations传递数字

helloworld中

 methods:{
	addnum(){
		this.$store.commit('getAdd',100)
	}
}
1
2
3
4
5

vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var store=new Vuex.Store({
	state:{
		// state相当于data
		num:110
	},
	getters:{
		// 1.定义方法，传入state
		newnum(state){
			// 2.将新数据return出去
			return state.num+'块钱'
		}
	},
	mutations:{
		// 1.定义方法，传入state
		getAdd(state,data){
			// 2.实现自增
			state.num++
			console.log(data)
		}
	}
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

这是传递单个参数，如果传递多个参数，则需采用对象的形式

methods:{
	addnum(){
		this.$store.commit('getAdd',{id:"100",name:"tom"})
	}
}
1
2
3
4
5

知识点
在组件中不能直接修改state的值，需要通过mutations修改state中的属性值

actions的使用

作用：异步修改state的数据
actions中的方法并不能直接操作state中的数据，需要触发mutations中的方法，最终通过mutations中的方法修改数据。
说明：mutations是同步修改的，如果mutations出现异步操作，则不能继续操作state的数据，如果要在mutations实现异步修改，示例如下：
vuex代码：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var store=new Vuex.Store({
	state:{
		// state相当于data
		num:110
	},
	getters:{
		// 1.定义方法，传入state
		newnum(state){
			// 2.将新数据return出去
			return state.num+'块钱'
		}
	},
	mutations:{
		// 1.定义方法，传入state
		getAdd(state,data){
			setTimeout(()=>{
				state.num++
				console.log(state)
			},1000)
		}
	},
	actions:{
		// 1.定义方法，传入形参
		getAddActions(content){
			// 2.使用commit来触发mutations中的方法
			setTimeout(()=>{
				content.commit('getAdd')
			},1000)
			
		}
	}
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

helloworld.vue代码

<template>
  <div class="hello">
	  <h1>{{$store.getters.newnum}}</h1>
	  <input type="text" :value="$store.state.num" />
	  <input type="button" value="+1" @click="addnum" />
	  
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
  	return{};
  },
  methods:{
	addnum(){
		// 处理同步数据
		// this.$store.commit('getAdd',{id:"100",name:"tom"})
		// 处理异步数据
		this.$store.dispatch('getAddActions')
	}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

代码分离

随着功能的增加，state，getters，actions中的代码会越来越多，为了方便后期的管理，所以要实现代码分离。
第一步 如图所示

第二步 如图所示

getters，actions也是相应的代码分离方式