使用vuex存储数据

1.安装vuex

npm install vuex --save

2.导入vuex

一般是在src下面新建一个store的文件夹

在store文件夹下新建一个index.js文件，在index.js导入vuex

import Vue from 'vue'
import Vuex from 'vuex'

import getters from './getters'
Vue.use(Vuex);

const store = new Vuex.Store({

  getters,

  state: {

    fullscreen: false,

    uploadUrl: 'http://47.100.126.74:282/File/FileUpload/UploadFiles',

  }

})

export default store

获取uploadUrl

this.$store.state.uploadUrl

3.在组件中保留数据

this.$store.dispatch('user/changeloginFormPwd', passwordverifiers );

user  是文件名

changeloginFormPwd  是这个文件中存储的字段名称

4.user.js文件

//state     自定义的名字和类型，可定义多个，我用verifierspwd来存储密码

const state = {

  email: '',

  verifierspwd: "",

}

//唯一可以修改state值的方法

const mutations = {

  SET_PASSWORD_VERIFIERS(state, fid) {

    state.verifierspwd = fid

  },

  SET_ROLES: (state, roles) => {

    state.roles = roles

  },

}

//异步调用mutations方法

const actions = {

  changeloginFormPwd({ commit }, val) {

    commit('SET_PASSWORD_VERIFIERS', val)

  },

  changeloginFormPwd({ commit }, val) {

    commit('SET_ROLES', val)

  },

}

//暴露出来

export default {

  namespaced: true,

  state,

  mutations,

  actions

}

5.可以将这个数据存在getters.js文件中维护

const getters = {

  sysUseType: state => state.sysInfo.sysUseType,

  verifierspwd: state => state.user.verifierspwd,

}

export default getters

6.获取数据

6.1      this.$store.getters.verifierspwd

6.2      this.$store.state.user.verifierspwd

使用mapGetters获取vuex的数据的话一定要建立getters.js文件

在index.js中引入    import getters from './getters'

在getters.js文件中增加需要的变量  

const getters = {

  sysUseType: state => state.sysInfo.sysUseType,

  verifierspwd: state => state.user.verifierspwd,

}

export default getters

获取数据

6.3      引入

        import { mapGetters } from 'vuex'

        

        

 computed: {

    ...mapGetters(['roles','verifierspwd'])

  },

获取

fun（）{

        this.verifierspwd

}

//如果有其他操作的话，可以用watch监听

watch: {

    roles(newValue) {

          console.log(newValue)

    }

  },