Vuex 中 state 属性的简单使用方法

1.页面读取下面state状态中数据的二种方式和三种表达式

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 666
  },
  getters: {
  },
  mutations: {
   
  },
  actions: {
  },
  modules: {
  }
})

第一种：插值语法,直接调用$store.state.num的方式调用

   <h2>{{ $store.state.num }}</h2>

第二种：在computed计算属性中使用辅助函数mapstate（） 

第一步引入mapState

import { mapState } from "vuex";

第二步在计算属性中使用...mapState()方法接受数据 

 computed: {
    ...mapState(["num"]), //第一种接受数据方式
    ...mapState({           //第二种接受数据方式
      aaa: "num",
    }),

页面中插入方式：

 <h2>{{ num }}</h2>
    <h2>{{ aaa }}</h2>