Vuex數(shù)據(jù)的存儲與獲取方式
Vuex數(shù)據(jù)存儲與獲取
因為最近需要對原有項目進行改造，之前沒有認(rèn)真研究過vuex的使用，今天把學(xué)習(xí)官方文檔的過程記錄下來以供日后查閱，同時也希望能夠為其他開發(fā)人員提供參考。
vuex的核心點是store，store本質(zhì)上是一個倉庫，它可以存儲大部分的state。而這種存儲是響應(yīng)式的，如果state發(fā)生變化，那么對應(yīng)的組件也會響應(yīng)更新。如果想要改變state，那么需要通過commit mutation。
以下示例引用自官網(wǎng)（開始 | Vuex）
// 創(chuàng)建一個新的 store 實例
const store = createStore({
? state () {
? ? return {
? ? ? count: 0
? ? }
? },
? mutations: {
? ? increment (state) {
? ? ? state.count++
? ? }
? }
})創(chuàng)建完成后可在vue組件中可以以this.$store.commit('具體mutation方法')來提交狀態(tài)變更
然后通過this.$store.state.x具體某一statex來得到對象的內(nèi)容。
如果想要更簡便的從store實例中讀取狀態(tài)，可以直接在computed中返回某個狀態(tài)：
// 創(chuàng)建一個 Counter 組件
const Counter = {
? template: `<div>{{ count }}</div>`,
? computed: {
? ? count () {
? ? ? return store.state.count
? ? }
? }
}但是為了避免多次出發(fā)dom，vue插件可以將store實例從跟組件中注入到所有的子組件中，子組件可以通過$store訪問。
const Counter = {
? template: `<div>{{ count }}</div>`,
? computed: {
? ? count () {
? ? ? return this.$store.state.count
? ? }
? }
}當(dāng)我們需要的狀態(tài)為多個時，可以利用mapState來生成計算屬性
computed: {
? localComputed () { /* ... */ },
? // 使用對象展開運算符將此對象混入到外部對象中
? ...mapState({
? ? // ...
? })
}可以舉一個實際應(yīng)用的例子
首先在main.js中注冊
import Vuex from 'vuex'?
Vue.use(Vuex)
?
const store = new Vuex.Store({
//存放全局狀態(tài)
state:{
count:0
},
?
//getters是對state的加工包裝，比如將一些數(shù)據(jù)進行過濾等，為只讀的方法，通過return獲取值
getters:{
countNum(state){
return `the account NUm is ${state.count}`
}
}
?
//通過mutations修改state，如果直接修改state會導(dǎo)致一些特性丟失
mutations:{
?add(state){
state.count++
},
?minus(state){
state.count--
}??
}??
//actions涉及業(yè)務(wù)邏輯，不涉及頁面的一些行為?
})在對應(yīng)的vue組件中，如下代碼可在頁面顯示count的值，則可在vue的一個組件例如app.vue中進行如下操作
<template>
?
<div>
<h1>{{count}}</h1>
<h2>{{countNum}} </h2>
</div>
?
</template><script>?
import {mapState,mapGetters} from 'vuex'?
export default{
?
//
computed:{
...mapState(['count'])
...mapGetters{['countNum']}
}
}
</script>若想使用mutation中的方法，則可在另一個vue文件例如hello.vue中進行如下操作，同時為了方便觀察，在控制臺中可以選擇vuex實時觀察vue內(nèi)容
<template> <div> <button @click=addnum>增加</button> </div> </template>
methods：{
...mapMutations('add','minus')
addnum（）{
//mutations必須通過commit才能使用,但是因為之前調(diào)用了...mapMutations,所以可以直接調(diào)用this.add();
//this.$store.commit('add')
this.add()
?
//使用mutations會確保有vuex狀態(tài)改變的記錄，如果直接this.$store.state.count也會生效
//this.$store.state.count++但是此種寫法開發(fā)工具vuex里面無法產(chǎn)生記錄
}
}
?
<javascript>
</javascript>一般情況下，簡單的業(yè)務(wù)邏輯要寫在mutation里，復(fù)雜的業(yè)務(wù)邏輯要寫在actions里
Vuex存值與取值(簡單易懂)
組件內(nèi)存值
methods: { ?
? ? ?fn() { ? ??
? ? ? ? ? ? ?this.$store.commit('setValue',xxx) ? //setValue存值隨便起個名, ? xxx要存的值?
? ? ? ? ? } ? ? ? ? ??
? ? }store.js的state中
const state = {
? ? xxx:'',//把存的那個值的名字初始化一下
}store.js的matution中
? setValue(state,item){
? ? state.xxx= item;//第二個參數(shù)隨意起個名
? },組件內(nèi)取值
//在計算屬性中取值,js直接這樣寫拿到值,html用直接xxx使用
?computed: { ? ?
? ? value() {
? ? ? return this.$store.state.xxx;
? ? }
? },以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
從vue基礎(chǔ)開始創(chuàng)建一個簡單的增刪改查的實例代碼(推薦)
這篇文章主要介紹了從vue基礎(chǔ)開始創(chuàng)建一個簡單的增刪改查的實例代碼，需要的朋友參考下2018-02-02
這篇文章主要為大家詳細(xì)介紹了Vue 3.0雙向綁定原理的實現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
VUE 直接通過JS 修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法分析
這篇文章主要介紹了VUE 直接通過JS 修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法,結(jié)合實例形式詳細(xì)分析了VUE使用JS修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)的原因與解決方法,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue如何實現(xiàn)無縫輪播圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue實例中el和data的兩種寫法,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了關(guān)于Vue中$refs的探索，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程
這篇文章主要介紹了Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程,正如其名，vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中：全局的，單個路由獨享的，或者組件級的2023-04-04
這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
vue 通過下拉框組件學(xué)習(xí)vue中的父子通訊
這篇文章主要介紹了vue 通過下拉框組件學(xué)習(xí)vue中的父子通訊的相關(guān)知識,文中涉及到了父組件，子組件的實現(xiàn)代碼，需要的朋友可以參考下2017-12-12
vue中el-table前端如何導(dǎo)出excel數(shù)據(jù)表格
這篇文章主要介紹了vue中el-table前端如何導(dǎo)出excel數(shù)據(jù)表格,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07