• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Vuex状态管理-详细介绍-mapState的基本用法


Recommended Posts

使用vuex集中管理状态

Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中存储来管理应用程序所有组件的状态,并确保状态以可预测的方式随相应的规则变化。

//store.js

/*

Vuex的核心管理对象模块:store

*/

从“vue”导入Vue

从“vuex”导入Vuex

Vue.use(Vuex)

//状态对象

Const state={//初始化状态这里放置的状态可以被多个组件共享。

count: 1,

名字: '大明'

}

常量突变={}

const action={}

const getters={}

导出默认的新Vuex。商店({

状态,//状态

突变,//包含多个更新状态函数的对象

Actions,//包含多个编队事件回调函数的对象

Getters //包含多个getter计算属性函数的对象。

})

//main.js

/*

JS入口

*/

从“vue”导入Vue

从'导入应用程序。/App.vue '

从'导入存储。/商店'

//创建虚拟机

/* eslint-禁用no-new */

新Vue({

el: '#app ',

Components: {App},//映射组件标签

Template: 'App/',//指定要呈现给页面的模板。

Store //所有组件对象都有一个附加属性:$store。

})

在组件中获取vuex状态

虽然将所有状态放在Vuex中会使状态变化更明确,更容易调试,但也会使代码冗长,不直观。如果某些状态严格地属于单个组件,最好把它们作为组件的局部状态,比如temp变量、tempcount、tempcount2作为组件的局部状态。

!- App.vue -

模板

div id='example '

{{count}}

{{name}}

{{nameAlias}}

/div

/模板

脚本

从' vuex' /导入{mapState}引入mapState

导出默认值{

data () {

返回{

//使用Vuex并不意味着需要把所有状态都放在Vuex里。虽然将所有状态放在Vuex中会使状态变化更明确,更容易调试,但也会使代码冗长,不直观。

//如果有些状态严格属于单个组件,不如把它们当做组件的局部状态。您应该根据您的应用程序开发需求进行权衡和确定。

//以下临时变量tempcount、tempcount2充当组件的本地状态

temp: '你好',

tempcount: 1,

温度计数2: 2

}

},

计算: {

//tempCountPlusTempCount2该计算属性与vuex管理的状态无关。

tempCountPlusTempCount2() {

返回this.tempcount this.tempcount2

}

//因为Vuex的状态存储是响应式的,所以可以使用计算属性来获取某个状态。

//当状态发生变化时,会重新计算属性,并触发关联的DOM进行更新。

//可以访问计数、名称、nameAlias等。在当前组件中通过以下计算属性。我们通过模板中的花括号把它们打印出来。

//以下计算属性与vuex管理的状态相关。

Count () {//这其实是ES6中对象的简化写法。完整的写的是Count3360函数{返回这个。$ store.state.count}

归还这个。$store.state.age

},

Name () {//这其实是ES6中对象的简化写法。完整的写法是name 3360函数{返回这个。$ store.state.age}

归还这个。$store.state.age

},

nameAlias () {

归还这个。$store.state.name

}

countplustempcount:函数(状态){

退回这个. te

mpcount + this.$store.state.count }, countplustempcount2 (state) { return this.tempcount2 + this.$store.state.count } // 但有一个问题 // 当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。比如上面的name(),count(),nameAlias(),显得重复,代码冗长 // 为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键: } } </script>

但有一个问题,当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。比如上面的name(),count(),nameAlias(),显得重复,代码冗长。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键

mapState接收一个对象
mapState函数的可以接受一个对象Object<string | function>。对象中可以包含字符串或函数。mapState()函数的返回结果是一个对象。

<template>
  <div id="example">
    {{count}}
    {{name}}
    {{nameAlias}}
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      temp: 'hello',
      tempcount: 1,
      tempcount2: 2
    }
  },
  computed: mapState({
    count: 'count',  // string    映射 this.count 为 store.state.count的值
    // 箭头函数可使代码更简练
    name: (state) => state.name, // function   映射 this.name 为 store.state.name的值
    nameAlias: 'name', // string   映射 this.nameAlias 为 store.state.name的值
    countplustempcount: function (state) { // 用普通函数this指向vue实例,但是在箭头函数中this就不是指向vue实例了,所以这里必须用普通哈数
      return this.tempcount + state.count
    },
    countplustempcount2 (state) {
      return this.tempcount2 + state.count
    }   
  })
}
</script>
 
  • 我们继续看上面的mapState函数
computed: mapState({
    count: 'count',  // string    映射 this.count 为 store.state.count的值
    // 箭头函数可使代码更简练
    name: (state) => state.name, // function   映射 this.name 为 store.state.name的值
    nameAlias: 'name', // string   映射 this.nameAlias 为 store.state.name的值
    countplustempcount: function (state) { // 用普通函数this指向vue实例,但是在箭头函数中this就不是指向vue实例了,所以这里必须用普通哈数
      return this.tempcount + state.count
    },
    countplustempcount2 (state) {
      return this.tempcount2 + state.count
    } 
})

上面mapState()函数接收了一个对象。
对象的第一个属性是string类型的,count: 'count', 这条语句映射出了this.count, 值等于store.state.count的值。

对象的第二个属性是一个箭头函数,name: (state) => state.name,,映射 this.name 为 store.state.name的值。

对象的第三个属性是一个string类型,nameAlias: 'name',映射 this.nameAlias 为 store.state.name的值, 和第一个属性的用法本质是一致的,不过这里映射出的计算属性的名称与 state 的子节点名称不同。

对象的第四个属性是一个普通函数,普通函数和箭头函数的不同之处在于,普通函数中的this指向了vue实例,因为可以访问到当前组件的局部状态,比如this.tempcount。

对象的第五个属性是一个普通函数,第五个和第四个的用法本质是一样的,只不过第五个用了ES6中对象的简化写法。

上面的mapState函数的返回值是一个对象,我们可以看作是这样的

computed:
{ // 这个对象就是mapState的返回值
    count () {
       return this.$store.state.count
    },
    name () {
        return this.$store.state.name
    }
    nameAlias () {
        return this.$store.state.name
    }
    countplustempcount: function (state) {
      return this.tempcount + this.$store.state.count
    },
    countplustempcount2 (state) {
      return this.tempcount2 + this.$store.state.count
    } 
}

把这个对象赋值给computed不就和原始的写法一样了吗,所以mapState起到了简化的作用。但是我们可以发现比起直接给computed赋值,这里少了tempCountPlusTempCount2这个计算属性。tempCountPlusTempCount2不是有vuex状态计算而来的,是根据组件内的局部状态计算来的。

mapState函数结合对象的扩展运算符运算符使用
对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。为什么要用扩展运算符呢,我们观察到上面直接将mapState函数的返回值赋给computed对象的话,那么computed中就只有对vuex状态的获取,而没有了当前组件的局部状态,比如tempCountPlusTempCount2就没地方放了,所以我们用扩展运算符。

let z = { a: 3, b: 4 };
let n = { ...z }; // 对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中
n // { a: 3, b: 4 }

所以利用扩展运算符将下面mapState函数的返回值对象

computed:{
    ...mapState({
        count: 'count',  // string    映射 this.count 为 store.state.count的值
        // 箭头函数可使代码更简练
        name: (state) => state.name, // function   映射 this.name 为 store.state.name的值
        nameAlias: 'name', // string   映射 this.nameAlias 为 store.state.name的值
        countplustempcount: function (state) { // 用普通函数this指向vue实例,但是在箭头函数中this就不是指向vue实例了,所以这里必须用普通哈数
          return this.tempcount + state.count
        },
        countplustempcount2 (state) {
          return this.tempcount2 + state.count
        } 
    })
}

上面的结果

computed:{
    count () {
       return this.$store.state.count
    },
    name () {
        return this.$store.state.name
    }
    nameAlias () {
        return this.$store.state.name
    }
    countplustempcount: function (state) {
      return this.tempcount + this.$store.state.count
    },
    countplustempcount2 (state) {
      return this.tempcount2 + this.$store.state.count
    } 
}

于是可以将组将内的计算属性和获取vuex状态的计算属性写在一起了。

computed:{
    tempCountPlusTempCount2() { 
          return this.tempcount+this.tempcount2
    }, 
    ...mapState({
        count: 'count',  // string    映射 this.count 为 store.state.count的值
        // 箭头函数可使代码更简练
        name: (state) => state.name, // function   映射 this.name 为 store.state.name的值
        nameAlias: 'name', // string   映射 this.nameAlias 为 store.state.name的值
        countplustempcount: function (state) { // 用普通函数this指向vue实例,但是在箭头函数中this就不是指向vue实例了,所以这里必须用普通哈数
          return this.tempcount + state.count
        },
        countplustempcount2 (state) {
          return this.tempcount2 + state.count
        } 
    })
}

这就是mapState的基本用法。

mapState函数接受一个数组

当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count',
  'name'
])

上面的写法可以看作

computed: {
    count () {
       return this.$store.state.count
    },
    name () {
        return this.$store.state.name
    }
}

最终版的mapState

computed: {
    tempCountPlusTempCount2() { 
          return this.tempcount+this.tempcount2
    }, 
    ...mapState(['count','name']),
    ...mapState({
        nameAlias: 'name', // string   映射 this.nameAlias 为 store.state.name的值
        countplustempcount: function (state) { // 用普通函数this指向vue实例,但是在箭头函数中this就不是指向vue实例了,所以这里必须用普通哈数
          return this.tempcount + state.count
        },
        countplustempcount2 (state) {
          return this.tempcount2 + state.count
        } 
    })
}

https://blog.csdn.net/chenjie9230/article/details/108883055

https://zhuanlan.zhihu.com/p/100941659

Link to comment
Share on other sites