快捷導(dǎo)航

vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式

更新時(shí)間：2022年04月12日 15:29:59 作者：青衣瀏陽

這篇文章主要介紹了vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改

1.main.js里引入狀態(tài)管理

import store from './store'?
new Vue({
? el: '#app',
? router,
? store,
? components: { App },
? template: '<App/>'
})

2.store的創(chuàng)建

import Vue from 'vue'
import Vuex from 'vuex'
import errorLog from './modules/user'
const getters={
name: state => state.user.name,
}

Vue.use(Vuex)

const store = new Vuex.Store({
? modules: {
? ? user
? },
? getters
})
export default store

user.js里的內(nèi)容，只定義了一個(gè)修改store里name的方法。

由于vuex中store的改變唯一的途徑是提交mutation,通過調(diào)用實(shí)例化后的vuex，mutations中相對應(yīng)的方法可以實(shí)現(xiàn)對狀態(tài)值的改變，其中name可以為參數(shù)對象，或者單個(gè)值，state參數(shù)在調(diào)用時(shí)默認(rèn)為第一個(gè)參數(shù)可以不傳，但是在mutations中申明該函數(shù)時(shí)必須傳入state

? mutations: {
? ? SET_NAME: (state, name) => {
? ? ? state.name = name
? ? }
? }
export default user

在子組件中通過this.$store.state.變量名在子組件中訪問state中某個(gè)變量的值

this.user.name = this.$store.state.name //這里的name為存儲在vuex中state的變量名

在子組件中通過this.$store.commit(‘方法名’，參數(shù))來進(jìn)行對vuex中的數(shù)據(jù)狀態(tài)進(jìn)行更新/插入

//在子組件中更新store中的狀態(tài)
?this.$store.commit("name",userName)//其中userName為傳入的參數(shù)

vuex數(shù)據(jù)管理,組件數(shù)據(jù)一一對應(yīng)

需求：我們點(diǎn)擊拍照后將拍好的照片放入vuex的state里面管理，給其他的組件調(diào)用（此處以組件A，和組件B命名）

1.組件A：我們拿到圖片數(shù)據(jù)源

并且在點(diǎn)擊拍照的同時(shí)創(chuàng)建一個(gè)當(dāng)前時(shí)間，將圖片源和時(shí)間以對象的形式提交vuex。

var url = canvas.toDataURL();
var date=new Date().toLocaleTimeString()
this.$store.commit("canvass", {url,date});

2. vuex（首先要記得下載和安裝vuex，此處省略）

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 var state={   //要設(shè)置的全局訪問的state對象
     canvass:[]//圖片和時(shí)間保存在這
   };
    var getters = {   //實(shí)時(shí)監(jiān)聽state值的變化(最新狀態(tài))
    getCanvass(state) {  //承載變化的getCanvass的值 ，給組件B調(diào)用
       return state.canvass
    }
};
var mutations = {
    canvass(state,datalist){  //組件A提交過來的數(shù)據(jù)，給到canvass中保存
        state.canvass.unshift(datalist)
    }
};
 var actions = {
 
};
  var store = new Vuex.Store({
       state,
       getters,
       mutations,
       actions
});
export default store;

3.組件B

html

<!-- 時(shí)間 -->
<ul class="row1">
  <li
    v-for="i in imglist"
    :key="i.url"
    @click="doImg(i.url)" //將循環(huán)到的圖片數(shù)據(jù)存入組件的數(shù)組中，方便時(shí)間和圖片一一對應(yīng)
    class="infinite-list-item"
  >
    <el-button size="small">{{ i.date }}</el-button>
  </li>
</ul>
<!-- 當(dāng)imglist數(shù)組中有數(shù)據(jù)的時(shí)候渲染imglist中的數(shù)據(jù)，當(dāng)用戶點(diǎn)擊按鈕的時(shí)候顯示url數(shù)組中的數(shù)據(jù) -->
<!-- 圖片 v-if判斷當(dāng)imglist.length>0也就是最少有一條數(shù)據(jù)的時(shí)候才渲染該dom -->
<img :src="flag?imglist[0].url: url" class="image" v-if="imglist.length>0" />

vue

data() {
    return {
      imglist: [], //默認(rèn)的圖片時(shí)間數(shù)據(jù)
      url: [], //點(diǎn)擊按鈕后對應(yīng)的圖片時(shí)間數(shù)據(jù)
      flag:true
    };
  },
  created() {
    this.imglist = this.$store.getters.getCanvass; //拿到vuex中g(shù)etters中的canvass數(shù)據(jù)
  }
 methods: {
    doImg(url) {
      this.url = url.split("???"); //點(diǎn)擊按鈕后將圖片時(shí)間數(shù)據(jù)保存到當(dāng)前最近的url數(shù)組中
      this.flag=false
    }
 }

大致效果

這樣當(dāng)我們沒有進(jìn)行拍照進(jìn)入該頁面的時(shí)候是空白顯示，當(dāng)然我們進(jìn)行拍照了之后進(jìn)入該頁面，默認(rèn)顯示最新拍的哪一張，在組件A拍照了幾張照片組件B就會顯示幾個(gè)時(shí)間點(diǎn)，點(diǎn)擊不同的時(shí)間點(diǎn)右側(cè)出現(xiàn)不同的時(shí)間點(diǎn)拍的照片

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

您可能感興趣的文章: