Vuex的存储和取值

目录

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
  },