Vuex拿到state中数据的3种方式与实例剖析

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)  // 注意：一定要用 Vue.use() 注册一下；
 
const store = new Vuex.Store({   /* 此时的 Vuex.Store 就是一个构造函数(即：相当于一个实例); */
  // 定义状态的地方;
  state: {
    num: 1,
    school: {
        name: 'xuexiqianduan',
        age: 26
    }
  },
})

export default store
// 此时是导出 store 文件，便于挂载；

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store, /* 挂载到实例完成后，在 vue 项目的任何地方就都可以使用 store */
  render: h => h(App),
}).$mount('#app')

<template>
  <div id="app">
    <h1>真实用法：展示Vuex中的State</h1>
    <p>方式一: num: {{ $store.state.num }}</p>
     <!-- '$store'就是指：拿到已经挂载到实例上的 store 下的 index.js 的内容； -->
  </div>
</template>
<script>
export default {
  computed: {
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
  <div id="app">
    <h1>真实用法：展示Vuex中的State</h1>
    <p>方式二: num: {{ num }}</p>
  </div>
</template>
<script>
export default {
  computed: {
    num() {
      return this.$store.state.num;
    },
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
  <div id="app">
    <h1>真实用法：展示Vuex中的State</h1>
    <p>方式三：num: {{ num }}  school: {{ school.name }}</p>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState(['num','school']),
    // 该函数内部运行的返回值大致为：{num: () => this.$store.state.num, school: () => this.$store.state.school} 
  }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>