// main.js中，把store注冊在根實例下，可使用this.$stroe.state直接取值
export default {
? computed: {
? ? testNum() {
? ? ? return this.$store.state.testNum;
? ? }
? }
};

import { mapState } from "vuex";export default {
? data() {
? ? return { localNum: 1 };
? },
? computed: {
? ? ...mapState({
? ? ? // 箭頭函數(shù)使代碼更簡練
? ? ? testNum1: state => state.testNum1,
? ? ? // 傳字符參數(shù)'testNum2' 等價于 'state => state.testNum2'
? ? ? testNum2: "testNum2",
? ? ? // 組件的局部變量與Vuex變量相加
? ? ? testNum3(state) {
? ? ? ? return state.testNum1 + this.localNum;
? ? ? }
? ? }),
? ? ...mapState([
? ? ? // 映射this.testNum3為store.state.testNum3
? ? ? "testNum3"
? ? ])
? }
};

import { mapState } from "vuex";
export default {
? computed: {
? ? ...mapState({
? ? ? // 箭頭函數(shù)使代碼更簡練
? ? ? testNum1: state => state.moduleA.testNum1
? ? }),
? ? // 第一個參數(shù)是namespace命名空間，填上對應(yīng)的module名稱即可
? ? ...mapState("moduleA", {
? ? ? testNum2: state => state.testNum2,
? ? ? testNum3: "testNum3"
? ? }),
? ? ...mapState("moduleA",[
? ? ? "testNum4"
? ? ])
? }
};

<h1>姓名：{{msg}}</h1>
<h1>年齡：{{age}}</h1>
<h1>數(shù)字：{{num}}</h1>
<input type="text" v-model="num">
computed: {
????????age:function(){??//msg也相同，就沒寫
????????????return this.$store.state.age
????????},
????????num:{
????????????get:function(){
????????????????return this.$store.state.num;
????????????},
????????????set:function(num){?? //數(shù)據(jù)雙向綁定
????????????????this.$store.commit('setNum',num)
????????????}
????????}
????},

<h1>姓名：{{msg}}</h1>
<h1>年齡：{{age}}</h1>
<h1>數(shù)字：{{num}}</h1>
<input type="text" :value="num" @input="changeVal" >
import { mapState } from 'vuex'??//需要引入mapState
computed:mapState(['age','msg','num']),
????methods: {??
????????changeVal(e){????//設(shè)置值
????????????return this.$store.commit('setNum',e.target.value)
????????}
????},

<h1>姓名：{{msg}}</h1>
<h1>年齡：{{age}}</h1>
<h1>數(shù)字：{{num}}</h1>
import { mapState } from 'vuex'??//需要引入mapState
computed:mapState({
????????msg:'msg',
????????num:'num',
????????// age:(state)=>state.age,?? //不需要大括號的時候，就不需要用 return 返回值
????????age:(state)=>{ return state.age},
????})

<h1>姓名：{{msg}}</h1>
<h1>年齡：{{age}}</h1>
<h1>數(shù)字：{{num}}</h1>
import { mapState } from 'vuex'
let objMapState=mapState({
????????msg:'msg',
????????num:'num',
????????// age:(state)=>state.age,
????????age:function(state){ return this.greenColor+state.age},
????})
data() {
????????return {
????????????greenColor:'blue'????????????
????????}
????},
computed:{
????????...mapState(objMapState)
????}