目录

1.1在main.js中

1.2 src目录下新建store文件夹

1.3 去要保存数据的页面

1.4 vuex存储数据后

1.5 在created中赋值


1.1在main.js中

import store from './store'

new Vue({
  router,
  store,
  created: bootstrap,
  render: h => h(App)
}).$mount('#app')


1.2 src目录下新建store文件夹

在index.js中,state中定义数据,你想保存什么样的数据,就定义成什么样。比如空字符串或者对象,因为我需要保存的是一个数组,所以我这里定义了一个空数组,mutations中操作state的数据,mutations中定义一个更新数据的方法,第一个参数必须是state,第二个参数是接受的参数。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    saveAllList:[]
  },
  mutations: {
   updateData(state,data){
     state.saveAllList = data
   }
  },
  actions: {

  },
  getters
})

1.3 去要保存数据的页面

        通过‘this.$store.commit(‘在vuex的mutation中定义的方法名’,这个页面上我们要保存的数据) ’获取数据

data() {
    return {
      saveAllList: [], //批量保存数组
      })
//失去输入框焦点
    inputonBlur(e) {
      if (!e.target.value.trim()) return // 优化防止没输入内容也调接口
      this.saveAllList.push({
        fPkDataId: this.fPkDataId,
        fVcContent: e.target.value
      })
      //我在这个事件里获取到  this.saveAllList,调用this.$store.commit把数据存入vuex中
      this.$store.commit('updateData', this.saveAllList)

    },

1.4 vuex存储数据后

在需要使用的页面调用数据,首先在data中定义一个空数组,还是叫同一个名。

data() {
    return {
      saveAllList: [], //批量保存数组
      })

1.5 在created中赋值

created() {
   this.saveAllList = this.$store.state.saveAllList
  },

Logo

前往低代码交流专区

更多推荐