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 实例中读取状态最简单的方法就是在
      &nbsp; `计算属性` &nbsp;中返回某个状态：
    </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> &nbsp;
      {
   
   { count }} &nbsp;
      <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>

如下图

感觉文章好的话记得点个心心和关注，有错的地方麻烦指正一下，多谢！！！