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

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

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

狀態(tài)管理數據狀態(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里的內容，只定義了一個修改store里name的方法。

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

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

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

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

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

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

vuex數據管理,組件數據一一對應

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

1.組件A：我們拿到圖片數據源

并且在點擊拍照的同時創(chuàng)建一個當前時間，將圖片源和時間以對象的形式提交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={   //要設置的全局訪問的state對象
     canvass:[]//圖片和時間保存在這
   };
    var getters = {   //實時監(jiān)聽state值的變化(最新狀態(tài))
    getCanvass(state) {  //承載變化的getCanvass的值 ，給組件B調用
       return state.canvass
    }
};
var mutations = {
    canvass(state,datalist){  //組件A提交過來的數據，給到canvass中保存
        state.canvass.unshift(datalist)
    }
};
 var actions = {
 
};
  var store = new Vuex.Store({
       state,
       getters,
       mutations,
       actions
});
export default store;

3.組件B

html

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

vue

data() {
    return {
      imglist: [], //默認的圖片時間數據
      url: [], //點擊按鈕后對應的圖片時間數據
      flag:true
    };
  },
  created() {
    this.imglist = this.$store.getters.getCanvass; //拿到vuex中getters中的canvass數據
  }
 methods: {
    doImg(url) {
      this.url = url.split("???"); //點擊按鈕后將圖片時間數據保存到當前最近的url數組中
      this.flag=false
    }
 }