目录
知识不足的地方赶快点击学习呦~~~
Vuex入门(一)—— state,mapState,…mapState对象展开符详解
Vuex入门(二)—— mutations详解
Vuex入门(三)—— getters,getters,…getters对象展开符详解
Vuex入门(四)—— action和…mapActions详解
Vuex入门(五)—— 封装module全网最全详解(带源码)
Vuex入门(六)——mapState, mapGetters, mapMutations, mapActions全网最全详解终结篇(带源码)
Vuex官网:https://vuex.vuejs.org/zh/guide/#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-store
1.store.js
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
Mutation和Action对比总结:
1.Mutation是同步的,Action是异步的;
2.Mutation是直接变更状态,Action提交的是mutation;
3.Actions和Mutation 都支持载荷方式和对象方式进行分发。
mutations传参state
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { // 类似于 data
count: 1,
},
mutations: { // 类似于计算属性 computed
increment(state) { // 把上面state对象当参数传入,取对象里面的进行操作
state.count++
},
decrement(state) {
state.count--
},
},
getters:{
},
actions: {},
modules: {}
})
2.mutations.vue组件mutations详解 + 图片
<template>
<div>
<h1>mutations的用法</h1>
<div style="display: flex">
<button style="width: 50px" @click="increment">+</button>
{{ count }}
<button style="width: 50px" @click="decrement">-</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
computed: {
count() {
return this.$store.state.count; // 接收store.js里面的state下面的count // 语法: this.$store.state.XX XX为state下面的名称key
},
},
methods: {
increment() {
this.$store.commit("increment"); // 接收store.js里面的mutations下面的increment方法 // 语法: this.$store.commit("XX"); XX 为mutations里面自定义函数名
},
decrement() {
this.$store.commit("decrement"); // 接收store.js里面的mutations下面的decrement方法
},
},
};
</script>
如下图
感觉文章好的话记得点个心心和关注,有错的地方麻烦指正一下,多谢!!!