vuex新手進階篇之取值

Posted on by

前言

關於vuex的介紹我就不說什麼瞭，沒接觸過的同學請直接移步vuex官網：vuex官網

本篇博客主要介紹vuex的取值，可能有的前端人還未用過vuex中的modules模塊，這裡也一並介紹，話不多說直接上代碼

1.首先這是我的目錄結構，index.js不必多過介紹，modules是分的模塊，dict就是我用來存放字典的一個狀態管理，我們需要在index.js中的modules中引用，否則無效；

index.js

dict.js 

建議在modules下的文件下，加上namespaced：true，設置命名空間為true，主要為瞭解決不同模塊命名沖突的問題

2.取值，取值的方式一般有兩種，兩種並無多大差別，根據個人喜好吧

<template>
  <div class="hello">
    <div>
      <div>獲取store index.js中的state</div>
      <!-- 第一種獲取vuex state方法 -->
      <div>
        {{ $store.state.userInfo.name + "-" + $store.state.userInfo.age }}
      </div>
      <!-- 第二種獲取vuex state方法 -->
      <div>
        {{ userInfo.name + "-" + userInfo.age }}
      </div>
    </div>
    ------------------------------------------------------------------------------
    <div>
      <div>獲取store modules下的dict.js中的state</div>
      <!-- 第一種獲取vuex state方法 -->
      <div>
        {{ $store.state.dict.taskTypeDict }}
      </div>
      <!-- 第二種獲取vuex state方法 -->
      <div>
        {{ dict.taskTypeDict }}
      </div>
    </div>
  </div>
</template>
 
<script>
import { mapState } from "vuex"; //對應第二種取值方式
export default {
  name: "HelloWorld",
  computed: {
    ...mapState(["userInfo", "dict"]), //對應第二種取值方式
  },
};
</script>

頁面展示

總結 

到此這篇關於vuex新手進階篇之取值的文章就介紹到這瞭,更多相關vuex取值內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：