vuex新手進(jìn)階篇之取值

更新時間：2022年10月19日 14:57:22 作者：Jay丶千玨

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之取值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

關(guān)于vuex的介紹我就不說什么了，沒接觸過的同學(xué)請直接移步vuex官網(wǎng)：vuex官網(wǎng)

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

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

index.js

dict.js

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

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

<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"; //對應(yīng)第二種取值方式
export default {
  name: "HelloWorld",
  computed: {
    ...mapState(["userInfo", "dict"]), //對應(yīng)第二種取值方式
  },
};
</script>

頁面展示

總結(jié)

到此這篇關(guān)于vuex新手進(jìn)階篇之取值的文章就介紹到這了,更多相關(guān)vuex取值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vuex
取值

相關(guān)文章

圖文詳解vue框架安裝步驟
我們在本篇內(nèi)容里給大家整理了關(guān)于vue框架安裝的步驟以及需要注意的地方，有需要的朋友們學(xué)習(xí)下。
2019-02-02
Vue實(shí)現(xiàn)學(xué)生管理功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)學(xué)生管理功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
vue引用json文件的方法小結(jié)
這篇文章主要介紹了vue引用json文件,解決怎么從控制臺把數(shù)據(jù)移到j(luò)son文件中，只需要直接右擊復(fù)制值即可，需要的朋友可以參考下
2022-09-09
Vue Element前端應(yīng)用開發(fā)之樹列表組件
本篇隨筆主要介紹樹列表組件和下拉列表樹組件在項(xiàng)目中的使用，以及一個SplitPanel的組件。
2021-05-05
簡單了解Vue + ElementUI后臺管理模板
這篇文章主要介紹了簡單了解Vue + ElementUI后臺管理模板,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-04-04
vue如何實(shí)現(xiàn)拖動圖片進(jìn)行排序Vue.Draggable
這篇文章主要介紹了vue如何實(shí)現(xiàn)拖動圖片進(jìn)行排序Vue.Draggable，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
前端Vue項(xiàng)目部署到服務(wù)器的全過程以及踩坑記錄
使用Vue做前后端分離項(xiàng)目時,通常前端是單獨(dú)部署,用戶訪問的也是前端項(xiàng)目地址,因此前端開發(fā)人員很有必要熟悉一下項(xiàng)目部署的流程,下面這篇文章主要給大家介紹了關(guān)于前端Vue項(xiàng)目部署到服務(wù)器的全過程以及踩坑記錄的相關(guān)資料,需要的朋友可以參考下
2023-05-05
使用Vue3和ApexCharts繪制交互式熱力圖
熱力圖是一種數(shù)據(jù)可視化技術(shù),它使用顏色來表示數(shù)據(jù)點(diǎn)的值,熱力圖常用于可視化分布數(shù)據(jù),例如人口密度、溫度變化或網(wǎng)站流量,本文給大家介紹了如何使用Vue3和ApexCharts創(chuàng)建交互式熱力圖,需要的朋友可以參考下
2024-06-06
vue-cli2.0轉(zhuǎn)3.0之項(xiàng)目搭建的詳細(xì)步驟
這篇文章主要介紹了vue-cli2.0轉(zhuǎn)3.0之項(xiàng)目搭建的詳細(xì)步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
Vue3中當(dāng)v-if和v-for同時使用時產(chǎn)生的問題和解決辦法
封裝一個組件時,我使用到了v-for和v-if,它們在同一標(biāo)簽內(nèi),總是提示v-for循環(huán)出來的item在實(shí)例中沒有被定義,查詢資料后原因是因?yàn)関-for和v-if在同級使用時,v-if優(yōu)先級比v-for高,所以本文給大家介紹了Vue3中當(dāng)v-if和v-for同時使用時產(chǎn)生的問題和解決辦法
2024-07-07