学习笔记
vuex的vue的状态（数据）管理工具 , 也就是说 vuex打破了，组件之间的传值，
父传子： 通过 v-bind 属性绑定的方式传值 通过props 接收值
子传父： 通过 @on 事件绑定 $emit 函数的 的方式传值， 通过 子组件传过来的函数名称 作为父组件的函数名称 进行接收
非父子： 通过 bus ，第三方中间件的方式 传值 ， 传值 通过 $emit 函数 接值 通过 $on 监听数据 接收
vuex的诞生就是 管理这些vue当中的复杂传值，之间把vuex当作全局数据 进行一个vuex语法的使用 数据
vuex中，有默认的五种基本的对象：
state：存储状态（变量）----存储数据的
getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()---复制state的值，创建一个展示的值给你，但是不会改变state中的数据
mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。----修改state中数据的
actions：异步操作。在组件中使用是$store.dispath('')----处理mutations不能处理的异步请求的
modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。----子模块开发的
二，vuex的安装
1.下载安装
npm install vuex --save
2.引入vuex和注册vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3.创建 steot
const store = Vuex.Store({
//state放数据的
state: {
count: 2,
},
//对数据进行运算，但是不能做异步运算
mutations: {
},
//对数据进行异步运算，不能直接做运算
actions: {
},
modules: {
}
})
5.把steot函数挂在到vue实例中
new Vue({
store,
render: h => h(App)
}).$mount('#app')
三，vuex的数据调用方法（state数据的调用）
State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储
1.通过this.$store.state.全局数据名称 如：this.$store.state.count 直接调用数据
<template>
<div>
<!-- //第一种调用vuex中的全局数据中的方法 -->
<p>我是第一种方法调用的vuex的数据:{{ this.$store.state.count }}</p>
</div>
</template>
<script>
export default {};
</script>
<style scoped></style>
然后数据映射为计算属性： computed:{ ...mapState(['全局数据名称']) }
<template>
<div>
<p>我是第二种方法调用的vuex的数据:{{ count }}</p>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState(["count"])
},
methods: {}
};
</script>
<style scoped></style>
四，通过mutations修改state中的数据
Mutation用于修改变更$store中的数据
1.通过点击事件，触发mutations中的函数进行 state的数据的计算
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//放数据的
state: {
count: 2,
},
//处理数据的函数
mutations: {
//state 代表 state数据源，
add (state) {
//把 state中的 count 数据进行 自曾1
state.count++;
},
//参数二，stop代表传入过来的值
addn (state, stop) {
//把 state中的 count 数据进行 自曾1
state.count += stop;
},
addj (state) {
//把 state中的 count 数据进行 自减1
state.count--;
},
addjn (state, st) {
//把 state中的 count 数据进行 自减1
state.count -= st;
}
},
//处理异步函数的（不处理数据的计算）
actions: {
},
})
<template>
<div>
<!-- //第一种调用vuex中的全局数据中的方法 -->
<p>我是第一种方法调用的vuex的数据:{{ this.$store.state.count }}</p>
<button @click="addjia">+1</button>
<button @click="addjian">+n</button>
</div>
</template>
<script>
export default {
methods: {
addjia() {
//触发mutations 中的add函数
this.$store.commit("add");
},
addjian() {
//触发mutations 中的add函数
this.$store.commit("addn", 3);
}
}
};
</script>
<style scoped></style>
2.通过按需导入 mapMutations的方法，在methods中 调用mutations中的函数
import { mapMutations } from 'vuex'
methods:{ ...mapMutations(['add']) }
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//放数据的
state: {
count: 2,
},
//处理数据的函数
mutations: {
//state 代表 state数据源，
add (state) {
//把 state中的 count 数据进行 自曾1
state.count++;
},
//参数二，stop代表传入过来的值
addn (state, stop) {
//把 state中的 count 数据进行 自曾1
state.count += stop;
},
addj (state) {
//把 state中的 count 数据进行 自减1
state.count--;
},
addjn (state, st) {
//把 state中的 count 数据进行 自减1
state.count -= st;
}
},
//处理异步函数的（不处理数据的计算）
actions: {
},
})
<template>
<div>
<p>我是第二种方法调用的vuex的数据:{{ count }}</p>
<button @click="addjian">-1</button>
<button @click="addjiann">-n</button>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
data() {
return {};
},
computed: {
...mapState(["count"])
},
methods: {
...mapMutations(["addj", "addjn"]),
addjian() {
this.addj();
},
addjiann() {
this.addjn(10);
}
}
};
</script>
<style scoped></style>
五，通过actions处理mutations 函数中 不能处理异步对象的函数
在vuex中我们可以使用Action来执行异步操作。
1.直接调用 actions 处理 异步对象
import Vue from 'vue'
import Vuex from 'vuex'
import { setTimeout } from 'core-js';
Vue.use(Vuex)
export default new Vuex.Store({
//放数据的
state: {
count: 2,
},
//处理数据的函数
mutations: {
//state 代表 state数据源，
add (state) {
//把 state中的 count 数据进行 自曾1
state.count++;
},
//参数二，stop代表传入过来的值
addn (state, stop) {
//把 state中的 count 数据进行 自曾1
state.count += stop;
},
addj (state) {
//把 state中的 count 数据进行 自减1
state.count--;
},
addjn (state, st) {
//把 state中的 count 数据进行 自减1
state.count -= st;
}
},
//处理异步函数的（不处理数据的计算）
actions: {
// 参数一 指向，mutations（处理数据的函数），
//参数二 执行，接收调用本函数传过来的值
asyncadd (context, step) {
setTimeout(() => {
//用commit指向一个 mutations中的函数 和 传值内容
context.commit('addn', step)
}, 1000)
},
asyncjain (context, step) {
setTimeout(() => {
//用commit指向一个 mutations中的函数 和 传值内容
context.commit('addjn', step)
}, 1000)
}
},
})
<template>
<div>
<!-- //第一种调用vuex中的全局数据中的方法 -->
<p>我是第一种方法调用的vuex的数据:{{ this.$store.state.count }}</p>
<button @click="addjia">+1</button>
<button @click="addjian">+n</button>
<button @click="addjians">延迟1秒+n</button>
</div>
</template>
<script>
export default {
methods: {
addjia() {
//触发mutations 中的add函数
this.$store.commit("add");
},
addjian() {
//触发mutations 中的add函数
this.$store.commit("addn", 3);
},
addjians() {
this.$store.dispatch("asyncadd", 5);
}
}
};
</script>
<style scoped></style>
2.通过按需导入mapactions 函数处理异步数据
import { mapActions } from 'vuex'
methods:{ ...mapMutations(['subAsync']) }
import Vue from 'vue'
import Vuex from 'vuex'
import { setTimeout } from 'core-js';
Vue.use(Vuex)
export default new Vuex.Store({
//放数据的
state: {
count: 2,
},
//处理数据的函数
mutations: {
//state 代表 state数据源，
add (state) {
//把 state中的 count 数据进行 自曾1
state.count++;
},
//参数二，stop代表传入过来的值
addn (state, stop) {
//把 state中的 count 数据进行 自曾1
state.count += stop;
},
addj (state) {
//把 state中的 count 数据进行 自减1
state.count--;
},
addjn (state, st) {
//把 state中的 count 数据进行 自减1
state.count -= st;
}
},
//处理异步函数的（不处理数据的计算）
actions: {
// 参数一 指向，mutations（处理数据的函数），
//参数二 执行，接收调用本函数传过来的值
asyncadd (context, step) {
setTimeout(() => {
//用commit指向一个 mutations中的函数 和 传值内容
context.commit('addn', step)
}, 1000)
},
asyncjain (context, step) {
setTimeout(() => {
//用commit指向一个 mutations中的函数 和 传值内容
context.commit('addjn', step)
}, 1000)
}
},
})
<template>
<div>
<p>我是第二种方法调用的vuex的数据:{{ count }}</p>
<button @click="addjian">-1</button>
<button @click="addjiann">-n</button>
<button @click="addjiannjain">延迟1秒 - n</button>
</div>
</template>
<script>
//按需导入 mapstate数据源，mapmutations 处理数据的函数（不能处理异步对象的数据的计算）
//，mapactions处理异步数据的函数（不能处理数据的计算）
import { mapState, mapMutations, mapActions } from "vuex";
export default {
data() {
return {};
},
//在计算属性 computed中通过 mapstate展开运算符导入 数据名（在vuex中定义的数据）
computed: {
...mapState(["count"])
},
//在vue放函数里面 methods 中 通过 mapmutations ，mapactions展开运算导入对象的处理函数
methods: {
...mapMutations(["addj", "addjn"]),
...mapActions(["asyncjain"]),
addjian() {
this.addj();
},
addjiann() {
this.addjn(10);
},
addjiannjain() {
this.asyncjain(5);
}
}
};
</script>
<style scoped></style>
发表评论