let state = {
count: 5
name :'handsome boy' ,
sex:'male',
from :"china"
}
export default state
Copy the code

<script>
export default {
data () {
  return {
     dataCount: this.$store.state.count
}
},
computed:{
  count() {return this.$store.state.count
},
  name() {return this.$store.state.name
},
  sex() {return this.$store.state.sex
}
}
</script>Copy the code

1.mapstate

When a component needs to fetch multiple states, it can be repetitive and redundant to declare all those states as computed properties. To solve this problem, we can use the mapState helper function to help us generate calculated properties that will save you from pressing the key:

Import {mapState} from is introduced first'vuex'Copy the code

Then use the

<script>
export default {
data () {
return {
  dataCount: this.$store.state.count}
},
computed:mapState({ count:"count",  name::"name",  sex:"sex"})
</script>Copy the code

The same effect as above

Console (mapstate) {count:"count",name::"name",sex:"sex"}Copy the code

Computed receives the return value of mapState, which is an object

2… mapstate

mapstate


For example,

letA ={b: "I am B", mapState} console (a) //{b: "I am B", {count:"count",name::"name",sex:"sex"}} looks like thisCopy the code

Using the expansion operator… Mix it with local computed properties

letA ={b: "I am B",... Mapstate} console (a) //{b: "I am B", count:"count",name::"name",sex:"sex"} where a can successfully mapStatereturnJson format, and the b attribute of A successfully merged into a new objectCopy the code


I am also a front-end novice, have wrong place welcome to point out