iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0
自我挑戰組

與Vue相遇系列 第 22

Day022-Vuex 資料控管介紹(二)-Sate資料內容

Vue:今日首先來了解一下Vuex中的State部分:
State部分來說,相當於Vue的data,專門儲存資料。我們首先可以在這邊定義資料來源,將其為我們所需要用的Model。

如果,你是使用Vue CLI創建專案時,選擇Vuex的情況下,可以在目錄中看到Store資料夾:
https://ithelp.ithome.com.tw/upload/images/20201006/20130654Xv8l1hLHdb.jpg
裡面的index.js檔案,已經自動實例化Vuex:

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

可以在state屬性中,定義資料類型,例如我們在此定義帳戶名稱:

export default new Vuex.Store({
  state: {
    account: "EdwardXiong",
}

本範例簡述的來說明,如何取用store資料,所以利用創建出來的Home元件引入state:

import { mapState } from "vuex";

並且,使用computed來使用此屬性:

computed: {
    ...mapState(["account"]),
 },

最後,在需要使用的地方上引入,這邊使用Home元件:

<div class="home">
       {{ account }}
</div>

https://ithelp.ithome.com.tw/upload/images/20201006/201306540cV79lIvGs.jpg


上一篇
Day021-Vue 資料控管介紹(一)
下一篇
Day023-Vuex 資料控管介紹(三)-Mutation與Actions資料運作
系列文
與Vue相遇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言