mutations
在vue 中,只有mutation 才能改变state. mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,
先看上一篇文章的例子:
在没有用vuex的时候,我们可以实现点击颜色切换
用了vuex后,只实现了颜色变换一次的功能,那我们可不可以变换很多次呢?
mutations 登场 , 问题迎刃而解 :
store.js:
-
import Vue from 'vue';
-
import Vuex from 'vuex';
-
Vue.use(Vuex);
-
const state = {
-
show:false
-
}
-
export default new Vuex.Store({
-
state,
-
mutations:{
-
switch_color(state){
-
state.show = state.show?false:true
-
}
-
}
-
})
-
父组件:
-
-
<template>
-
<div>
-
<a href="javascript:;" @click="$store.commit('switch_color')">点击</a>
-
<children ></children>
-
</div>
-
</template>
-
<script>
-
import children from "@/components/children"
-
export default {
-
components: {
-
children
-
}
-
}
-
</script>
使用$store.commit('switch_color') 来触发 mutations 中的 switch_color 方法。
再举个例子
1、现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件
const state = { count:1 }
2、用export default 封装代码,让外部可以引用
export default new Vuex.Store({undefined
state
});
store.js:
-
import Vue from 'vue';
-
import Vuex from 'vuex';
-
Vue.use(Vuex);
-
const state = {
-
count:1
-
}
-
export default new Vuex.Store({
-
state,
-
mutations:{
-
add(state){
-
state.count += 1;
-
},
-
reduce(state){
-
state.count -= 1;
-
}
-
}
-
})
新建一个vue的模板,位置在components文件夹下,名字叫page.vue。在模板中我们引入我们刚建的store.js文件,并在模板中用{undefined{$store.state.count}}输出count 的值。
-
<template>
-
<div>
-
<div>{{$store.state.count}}</div>
-
<input type="button" @click="$store.commit('add')" value="+">
-
<input type="button" @click="$store.commit('reduce')" value="-">
-
</div>
-
</template>
-
<script>
-
import store from '../store/store'
-
export default {
-
-
}
-
</script>
这样进行预览就可以实现对vuex中的count进行加减了。
注意:mutations里的操作必须是同步的
你一定好奇 , 如果在 mutations 里执行异步操作会发生什么事情 , 实际上并不会发生什么奇怪的事情 , 只是官方推荐 , 不要 在 mutationss 里执行异步操作而已。
actions
action去commit mutations, 所以还要定义action. store.js 里面添加actions.
store.js:
-
import Vue from 'vue';
-
import Vuex from 'vuex';
-
Vue.use(Vuex);
-
const state = {
-
show:false,
-
count:1
-
}
-
export default new Vuex.Store({
-
state,
-
mutations:{
-
switch_color(state){
-
state.show = state.show?false:true
-
},
-
add(state){
-
state.count += 1;
-
},
-
reduce(state){
-
state.count -= 1;
-
}
-
},
-
actions:{
-
addPlus(context){
-
context.commit('add')
-
},
-
reducePlus(context){
-
context.commit('reduce');
-
}
-
}
-
})
action 和mutions 的定义方法是类似的,我们要dispatch 一个action, 所以actions 肯定有一个名字,dispatch action 之后它要做事情,就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context, 它是一个store 实例,通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性, context.commit 就会执行commit命令。
其实actions 还可以简写一下, 因为函数的参数是一个对象,函数中用的是对象中一个方法,我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions
-
actions:{
-
addPlus({commit}){
-
commit('add')
-
},
-
reducePlus({commit}){
-
commit('reduce');
-
}
-
}
-
})
当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.
打开page.vue 组件,给两个按钮添加click 事件。
-
<template>
-
<div>
-
<div>{{$store.state.count}}</div>
-
<input type="button" @click="$store.dispatch('addPlus')" value="+">
-
<input type="button" @click="$store.dispatch('reducePlus')" value="-">
-
</div>
-
</template>
-
<script>
-
import store from '../store/store'
-
export default {
-
-
}
-
</script>
context:上下文对象,这里你可以理解称store本身。
{commit}:直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了。
官方推荐 , 将异步操作放在 action 中。
getter
有的组件中获取到 store 中的state, 需要对进行加工才能使用,computed 属性中就需要写操作函数,如果有多个组件中都需要进行这个操作,那么在各个组件中都写相同的函数,那就非常麻烦,这时可以把这个相同的操作写到store 中的getters, 每个组件只要引用getter 就可以了,非常方便。Getter 就是把组件中共有的对state 的操作进行了提取,它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。
store.js:
-
export default new Vuex.Store({
-
state,
-
getters:{
-
count:function(state){
-
return state.count += 100;
-
}
-
},
-
mutations:{
-
switch_color(state){
-
state.show = state.show?false:true
-
},
-
add(state){
-
state.count += 1;
-
},
-
reduce(state){
-
state.count -= 1;
-
}
-
},
-
actions:{
-
addPlus({commit}){
-
commit('add')
-
},
-
reducePlus({commit}){
-
commit('reduce');
-
}
-
}
-
})
我们在组件中使用 $store.state.count 来获得状态 count , 类似的 , 我们可以使用 $store.getters.count 来获得状态 count 。
page.vue:
-
<template>
-
<div>
-
<div>{{$store.getters.count}}</div>
-
<input type="button" @click="$store.dispatch('addPlus')" value="+">
-
</div>
-
</template>
-
<script>
-
import store from '../store/store'
-
export default {
-
}
-
</script>
注意 : $store.getters.count 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。
文章来源:https://blog.csdn.net/qq_42043377/article/details/90697073
mutations
在vue 中,只有mutation 才能改变state. mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,
先看上一篇文章的例子:
在没有用vuex的时候,我们可以实现点击颜色切换
用了vuex后,只实现了颜色变换一次的功能,那我们可不可以变换很多次呢?
mutations 登场 , 问题迎刃而解 :
store.js:
-
import Vue from 'vue';
-
import Vuex from 'vuex';
-
Vue.use(Vuex);
-
const state = {
-
show:false
-
}
-
export default new Vuex.Store({
-
state,
-
mutations:{
-
switch_color(state){
-
state.show = state.show?false:true
-
}
-
}
-
})
-
父组件:
-
-
<template>
-
<div>
-
<a href="javascript:;" @click="$store.commit('switch_color')">点击</a>
-
<children ></children>
-
</div>
-
</template>
-
<script>
-
import children from "@/components/children"
-
export default {
-
components: {
-
children
-
}
-
}
-
</script>
使用$store.commit('switch_color') 来触发 mutations 中的 switch_color 方法。
再举个例子
1、现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件
const state = { count:1 }
2、用export default 封装代码,让外部可以引用
export default new Vuex.Store({undefined
state
});
store.js:
-
import Vue from 'vue';
-
import Vuex from 'vuex';
-
Vue.use(Vuex);
-
const state = {
-
count:1
-
}
-
export default new Vuex.Store({
-
state,
-
mutations:{
-
add(state){
-
state.count += 1;
-
},
-
reduce(state){
-
state.count -= 1;
-
}
-
}
-
})
新建一个vue的模板,位置在components文件夹下,名字叫page.vue。在模板中我们引入我们刚建的store.js文件,并在模板中用{undefined{$store.state.count}}输出count 的值。
-
<template>
-
<div>
-
<div>{{$store.state.count}}</div>
-
<input type="button" @click="$store.commit('add')" value="+">
-
<input type="button" @click="$store.commit('reduce')" value="-">
-
</div>
-
</template>
-
<script>
-
import store from '../store/store'
-
export default {
-
-
}
-
</script>
这样进行预览就可以实现对vuex中的count进行加减了。
注意:mutations里的操作必须是同步的
你一定好奇 , 如果在 mutations 里执行异步操作会发生什么事情 , 实际上并不会发生什么奇怪的事情 , 只是官方推荐 , 不要 在 mutationss 里执行异步操作而已。
actions
action去commit mutations, 所以还要定义action. store.js 里面添加actions.
store.js:
-
import Vue from 'vue';
-
import Vuex from 'vuex';
-
Vue.use(Vuex);
-
const state = {
-
show:false,
-
count:1
-
}
-
export default new Vuex.Store({
-
state,
-
mutations:{
-
switch_color(state){
-
state.show = state.show?false:true
-
},
-
add(state){
-
state.count += 1;
-
},
-
reduce(state){
-
state.count -= 1;
-
}
-
},
-
actions:{
-
addPlus(context){
-
context.commit('add')
-
},
-
reducePlus(context){
-
context.commit('reduce');
-
}
-
}
-
})
action 和mutions 的定义方法是类似的,我们要dispatch 一个action, 所以actions 肯定有一个名字,dispatch action 之后它要做事情,就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context, 它是一个store 实例,通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性, context.commit 就会执行commit命令。
其实actions 还可以简写一下, 因为函数的参数是一个对象,函数中用的是对象中一个方法,我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions
-
actions:{
-
addPlus({commit}){
-
commit('add')
-
},
-
reducePlus({commit}){
-
commit('reduce');
-
}
-
}
-
})
当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.
打开page.vue 组件,给两个按钮添加click 事件。
-
<template>
-
<div>
-
<div>{{$store.state.count}}</div>
-
<input type="button" @click="$store.dispatch('addPlus')" value="+">
-
<input type="button" @click="$store.dispatch('reducePlus')" value="-">
-
</div>
-
</template>
-
<script>
-
import store from '../store/store'
-
export default {
-
-
}
-
</script>
context:上下文对象,这里你可以理解称store本身。
{commit}:直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了。
官方推荐 , 将异步操作放在 action 中。
getter
有的组件中获取到 store 中的state, 需要对进行加工才能使用,computed 属性中就需要写操作函数,如果有多个组件中都需要进行这个操作,那么在各个组件中都写相同的函数,那就非常麻烦,这时可以把这个相同的操作写到store 中的getters, 每个组件只要引用getter 就可以了,非常方便。Getter 就是把组件中共有的对state 的操作进行了提取,它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。
store.js:
-
export default new Vuex.Store({
-
state,
-
getters:{
-
count:function(state){
-
return state.count += 100;
-
}
-
},
-
mutations:{
-
switch_color(state){
-
state.show = state.show?false:true
-
},
-
add(state){
-
state.count += 1;
-
},
-
reduce(state){
-
state.count -= 1;
-
}
-
},
-
actions:{
-
addPlus({commit}){
-
commit('add')
-
},
-
reducePlus({commit}){
-
commit('reduce');
-
}
-
}
-
})
我们在组件中使用 $store.state.count 来获得状态 count , 类似的 , 我们可以使用 $store.getters.count 来获得状态 count 。
page.vue:
-
<template>
-
<div>
-
<div>{{$store.getters.count}}</div>
-
<input type="button" @click="$store.dispatch('addPlus')" value="+">
-
</div>
-
</template>
-
<script>
-
import store from '../store/store'
-
export default {
-
}
-
</script>
注意 : $store.getters.count 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。