欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年10月19日 14:57:22   作者：Jay丶千玨  
Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之取值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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

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

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

index.js

dict.js 

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

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

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

頁(yè)面展示

總結(jié) 

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

相關(guān)文章

最新評(píng)論