知識(shí)回調(diào)（不懂就看這兒?。?/h2>
| 知識(shí)專欄 | 專欄鏈接 |
|---|---|
| Vuex知識(shí)專欄 | https://blog.csdn.net/xsl_hr/category_12158336.html?spm=1001.2014.3001.5482 |
| Vuex從了解到實(shí)際運(yùn)用（一）徹底搞懂什么是Vuex | https://blog.csdn.net/XSL_HR/article/details/130522551 |
| 【Vuex快速入門】vuex基礎(chǔ)知識(shí)與安裝配置 | https://blog.csdn.net/XSL_HR/article/details/128515917 |
有關(guān)Vuex的相關(guān)知識(shí)可以前往Vuex知識(shí)專欄查看復(fù)習(xí)??！
vuex官方文檔傳送門
場景復(fù)現(xiàn)
上期文章介紹了vuex是什么和vuex的一些核心特點(diǎn)，本期文章將以項(xiàng)目實(shí)戰(zhàn)為主，上手使用vuex。
項(xiàng)目實(shí)戰(zhàn)
vuex定義一個(gè)store實(shí)例
首先定義兩個(gè)組件，分別為One.vue和Second.vue，將兩個(gè)組件掛載到App.vue組件下。
在store中定義數(shù)據(jù)
接下來我們在store中定義數(shù)據(jù)，使得兩個(gè)小組件都能訪問到store里的值。
import { createStore } from 'vuex'
export default createStore({
state: {
things:[
{name: "張三", age:"18"},
{name: "李四", age:"17"},
{name: "王五", age:"20"},
]
},
mutations: {
},
actions: {
},
modules: {
}
})
注意：使用store實(shí)例時(shí)，需要提前創(chuàng)建store實(shí)例。
- 可以選擇在項(xiàng)目初始化時(shí)勾選vuex，這樣項(xiàng)目初始化成功后，store實(shí)例會(huì)被直接掛載到全局的main.ts或者main.js文件內(nèi)。
- 有的初始化工具無法選擇vuex，則需要我們手動(dòng)導(dǎo)入和掛載。
在組件中獲取值
分別在One.vue和Second.vue組件中，通過$store.state.things獲取到值（這里是因?yàn)樵趕tore中定義的數(shù)據(jù)名為things，需要根據(jù)變量名按要求獲取數(shù)據(jù)）
<template>
<div class="one">
組件一
<ul>
<li v-for="item in $store.state.things" :key="item">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</li>
</ul>
</div>
</template>
此時(shí)我們可以看看運(yùn)行出來的效果：??????
vuex的計(jì)算屬性
上面的操作主要是直接通過$store.state.things來獲取到值，但是我們往往需要對值進(jìn)行實(shí)時(shí)監(jiān)聽和更新，所以此時(shí)我們需要vuex的計(jì)算屬性——computed，但是在script中無法用以上的方法獲取到值，下面我們來看看解決辦法：??????
<template>
<div class="one">
組件一
<ul>
<li v-for="item in things" :key="item">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</li>
</ul>
</div>
</template>
<script setup>
import { computed } from "vue"
import { useStore } from "vuex"
const store = useStore()
const things = computed(() => store.state.things)
</script>
計(jì)算屬性是非常常用的，可以將更多的邏輯層代碼放在script中進(jìn)行編寫，優(yōu)化代碼結(jié)構(gòu)。
不過，使用計(jì)算屬性之前，我們需要先引入vuex提供的useStore，利用它實(shí)例化一個(gè)store對象，然后對store對象進(jìn)行操作，訪問到我們需要的值。
此時(shí)我們可以看看運(yùn)行出來的效果：??????
通過getters獲取全局狀態(tài)
上面我們介紹了如何通過state來獲取全局狀態(tài)，下面我們來嘗試用另一種方法——getter來獲取全局狀態(tài)。
首先我們需要在store中創(chuàng)建getter??????
import { createStore } from 'vuex'
export default createStore({
state: {
things:[
{name: "張三", age:"18"},
{name: "李四", age:"17"},
{name: "王五", age:"20"},
]
},
getters: {
getProducts: (state) => {
return state.things
}
},
mutations: {
},
actions: {
},
modules: {
}
})
在getters中我們定義了一個(gè)新的方法getProduct，此時(shí)在組件的代碼中，就可以在script中引入并調(diào)用這個(gè)方法。
$store.getters.getProducts
state和getters獲取全局狀態(tài)的區(qū)別
state和getters都能夠獲取到全局狀態(tài)，那么二者有什么區(qū)別呢？
- state只能夠獲取到全局狀態(tài)，并不能對狀態(tài)數(shù)據(jù)進(jìn)行微調(diào)
- getters既能獲取到全局狀態(tài)，還能對數(shù)據(jù)進(jìn)行調(diào)整
下面我們在getters中新增一個(gè)resetProducts方法，在每個(gè)數(shù)據(jù)的前面貼上>>>
getters: {
getProducts: (state) => {
return state.things
},
resetProducts: (state) => {
return state.things.map((things) => {
return {
name: `>>>${things.name}`
}
})
}
},
此時(shí)我們來看看調(diào)用此方法之后的效果：??????
很顯然，getters中調(diào)用的方法既能夠獲取到全局的狀態(tài)數(shù)據(jù)，而且更靈活，能夠根據(jù)需求對全局的狀態(tài)進(jìn)行處理。一般將數(shù)據(jù)處理的方法放在getters中，將各個(gè)組件的功能進(jìn)行組件化，保證父組件的層次結(jié)構(gòu)清晰明了。
以上就是關(guān)于實(shí)現(xiàn)通過getters和state獲取vuex的全局狀態(tài)的知識(shí)分享，相信看完這篇文章的小伙伴們一定能運(yùn)用這些方法在項(xiàng)目開發(fā)中。當(dāng)然，可能有不足的地方，歡迎大家在評論區(qū)留言指正！文章來源：http://www.zghlxwxcb.cn/news/detail-435000.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-435000.html
到了這里，關(guān)于Vuex從了解到實(shí)際運(yùn)用（二）——獲取vuex中的全局狀態(tài)（state getters）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
