quasar-将数据存储到vuex中并在页面中使用改数据

1.在store文件夹下的module-example中新建print.js(自定义文件名)

**
  * 存放 ** 数据
  * **/

 // initial state
 const state = {
   all: { 
     id: '',
     treeData1: {},
     treeData2: {}
   }
}

 // getters
 const getters = {}

 // actions
 const actions = {}

 // mutations
 const mutations = {
   setPrint(state, all) { //设置参数
     state.all = all;
   }
 }

 export default {
   namespaced: true,
   state,
   getters,
   actions,
   mutations
 }

2.在store文件夹的index.js中引入print

import { store } from 'quasar/wrappers'
import { createStore } from 'vuex'

// import example from './module-example'
import print from './module-example/print'

export default store(function (/* { ssrContext } */) {
 const Store = createStore({
    modules: {
      // example
      print
    },
    state:{  
    },
    // enable strict mode (adds overhead!)
    // for dev mode and --debug builds only
    strict: process.env.DEBUGGING
  })

  return Store
})

3.在需要保存数据至vuex的页面,保存数据

  this.$store.commit("print/setPrint", { //print 表示vuex的文件名
    treeData1: this.data
  });

4.调用vuex数据的页面

import { mapState,mapMutations } from 'vuex'
computed: {
  ...mapState({
    treeData1:state=>state.print.all.treeData1
  })
},
 // 方法中可直接打印
console.log('treeData1', this.treeData1)

你可能感兴趣的:(quasar-将数据存储到vuex中并在页面中使用改数据)