vuex状态管理数据状态查询与更改方式

目录

• 状态管理数据状态查询与更改
• 1.main.js里引入状态管理
• 2.store的创建
• vuex数据管理,组件数据一一对应
• 1.组件A：我们拿到图片数据源
• 2. vuex（首先要记得下载和安装vuex，此处省略）
• 3.组件B
• 大致效果

状态管理数据状态查询与更改

1.main.js里引入状态管理

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

2.store的创建

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中相对应的方法可以实现对状态值的改变，其中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中的数据状态进行更新/插入

//在子组件中更新store中的状态
 this.$store.commit("name",userName)//其中userName为传入的参数

vuex数据管理,组件数据一一对应

需求：我们点击拍照后将拍好的照片放入vuex的state里面管理，给其他的组件调用（此处以组件A，和组件B命名）

1.组件A：我们拿到图片数据源

并且在点击拍照的同时创建一个当前时间，将图片源和时间以对象的形式提交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 = {   //实时监听state值的变化(最新状态)
    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)" //将循环到的图片数据存入组件的数组中，方便时间和图片一一对应
    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
    }
 }

大致效果

这样当我们没有进行拍照进入该页面的时候是空白显示，当然我们进行拍照了之后进入该页面，默认显示最新拍的哪一张，在组件A拍照了几张照片组件B就会显示几个时间点，点击不同的时间点右侧出现不同的时间点拍的照片

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。