Vuex入门(一)—— state,mapState,...mapState对象展开符详解
目录
知识不足的地方赶快点击学习呦~~~
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 应用程序开发的状态管理模式 + 库
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { // 类似于 data
num:1000000,
count: 1,
name: '小明',
sex: '男',
from: '中国'
},
mutations: { // 类似于计算属性 computed
increment(state) { // 把上面state对象当参数传入,取对象里面的进行操作
state.count++
},
decrement(state) {
state.count--
}
},
actions: {},
modules: {}
})
2.state.vue组件state详解 + 图片
<template>
<div class="page">
<p style="font-size: 20px">
由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在
`计算属性` 中返回某个状态:
</p>
<br />
<p style="font-size: 18px">一:从store调用state值</p>
<br />
<div>
<span style="color: blue">值1:</span
><span style="color: red">{{ num }}</span>
</div>
<br />
<p style="font-size: 18px">
二:从store调用state值里面count值,mutations调用方法,触发状态变更
</p>
<br />
<div style="display: flex">
<button @click="increment" style="width: 100px">+</button>
{{ count }}
<button @click="decrement" style="width: 100px">-</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
computed: {
num() {
return this.$store.state.num; // 这里是从状态管理store.js获取的值state 语法为: this.$store.state.XXX(想要的属性值)
},
count() {
return this.$store.state.count;
},
},
methods: {
increment() {
this.$store.commit("increment"); // 这里是从状态管理store.js获取的方法mutations 语法为: this.$store.commit("XX"); XX为mutations里面定义好的方法名,随意定,按js命名规范就行,调用就行
},
decrement() {
this.$store.commit("decrement");
},
},
};
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
}
</style>
如下图
3.mapState.vue调用多个state值用mapState 和 …mapState 用起来方便 ,和mapMutations用法
使用mapState辅助函数,要引入
import { mapState } from "vuex";
方法
<template>
<div class="page">
<h1>mapState 辅助函数</h1>
<p style="font-size: 16px">
当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用
mapState 辅助函数帮助我们生成计算属性,让你少按几次键:
</p>
<div>方法1:{{ name }}</div>
<div>方法2:{{ sex }}</div>
<div>方法3:{{ from }}</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
country: "北京",
};
},
computed: mapState({
name: "name", // 第一种调用state方式
sex: (state) => state.sex, // 第二种调用state方式 箭头函数ES6语法
from: function (state) {
// 第三种调用state方式 常规函数
return state.from + "-" + this.country;
},
}),
// computed: {
// ...mapState({
// // 以下面用d是第一种调用state方式
// name: "name",
// sex: "sex",
// from: "from",
// }),
// // 或者简写为!!!!!!!!!
// ...mapState(["name", "sex", "from"]),
// },
// mapMutations 和 mapState 用法一样,mapMutations是用来存放vuex里面的mutations函数的,如下:
// import {mapMutations} from 'vuex'
// ......
// methods : {
// ...mapMutations([
// 'increment'
// ]),
// }
};
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
}
</style>
如下图
感觉文章好的话记得点个心心和关注,有错的地方麻烦指正一下,多谢!!!