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

Vuex數(shù)據(jù)的存儲與獲取方式

 更新時(shí)間：2022年06月24日 15:41:32   作者：Vc編碼中  
這篇文章主要介紹了Vuex數(shù)據(jù)的存儲與獲取方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vuex數(shù)據(jù)存儲與獲取

因?yàn)樽罱枰獙υ许?xiàng)目進(jìn)行改造，之前沒有認(rèn)真研究過vuex的使用，今天把學(xué)習(xí)官方文檔的過程記錄下來以供日后查閱，同時(shí)也希望能夠?yàn)槠渌_發(fā)人員提供參考。

vuex的核心點(diǎn)是store，store本質(zhì)上是一個倉庫，它可以存儲大部分的state。而這種存儲是響應(yīng)式的，如果state發(fā)生變化，那么對應(yīng)的組件也會響應(yīng)更新。如果想要改變state，那么需要通過commit mutation。

以下示例引用自官網(wǎng)（開始 | Vuex）

// 創(chuàng)建一個新的 store 實(shí)例
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實(shí)例中讀取狀態(tài)，可以直接在computed中返回某個狀態(tài)：

// 創(chuàng)建一個 Counter 組件
const Counter = {
? template: `<div>{{ count }}</div>`,
? computed: {
? ? count () {
? ? ? return store.state.count
? ? }
? }
}

但是為了避免多次出發(fā)dom，vue插件可以將store實(shí)例從跟組件中注入到所有的子組件中，子組件可以通過$store訪問。

const Counter = {
? template: `<div>{{ count }}</div>`,
? computed: {
? ? count () {
? ? ? return this.$store.state.count
? ? }
? }
}

當(dāng)我們需要的狀態(tài)為多個時(shí)，可以利用mapState來生成計(jì)算屬性

computed: {
? localComputed () { /* ... */ },
? // 使用對象展開運(yùn)算符將此對象混入到外部對象中
? ...mapState({
? ? // ...
? })
}

可以舉一個實(shí)際應(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ù)進(jìn)行過濾等，為只讀的方法，通過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中進(jìn)行如下操作

<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中進(jìn)行如下操作，同時(shí)為了方便觀察，在控制臺中可以選擇vuex實(shí)時(shí)觀察vue內(nèi)容

<template>
<div>
<button @click=addnum>增加</button>
</div>
</template>

  

methods：{
...mapMutations('add','minus')
addnum（）{
//mutations必須通過commit才能使用,但是因?yàn)橹罢{(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)取值

//在計(jì)算屬性中取值,js直接這樣寫拿到值,html用直接xxx使用
?computed: { ? ?
? ? value() {
? ? ? return this.$store.state.xxx;
? ? }
? },

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論