Vuex存储公共的数据步骤_前端vue存储公共数据

在我们平常做项目的过程中,经常会使用到公共的数据，这个时候Vuex是一个很好的仓库，它可以用来存储公共的数据 。

总共有五个: state ,getters,muaction,action,module。

现在我们具体分析一下怎么去使用。

一.在Store下的index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  getters
})
 
export default store

分析:

import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'

导入并且注册成模块。

二.在注册的user模块下

// 将token存储vuex中,vuex刷新就没了,解决刷新就没了的问题
import Cookiejs from 'js-cookie'
import { sysLogin } from '@/api/login'
import { Message } from 'element-ui'
import { sysProfile } from '@/api/user'
const state = {
  // 有就取token 没有就为空
  token: Cookiejs.set('hr67') || '',
  userInfo: ''
}
const mutations = {
  setToken(state, value) {
    state.token = value
    Cookiejs.set('hr67', value)
  },
  setUserInfo(state, value) {
    state.userInfo = value
  }
}
const actions = {
  // 登录
  async toLogin(store, from) {
    const res = await sysLogin(from)
    Message.success('登录成功')
    store.commit('setToken', res.data)
  },
  // 获取用户信息
  async getUserInfo({ commit }) {
    const res = await sysProfile()
    commit(' setUserInfo', res.data)
  }
}
const getters = {}
export default {
  namespaced: true,
  state,
  mutations,
  getters,
  actions
}

分析:

1.在state里面定义变量

const state = {
  // 有就取token 没有就为空
  token: Cookiejs.set('hr67') || '',
  userInfo: ''
}

2.在mutations下定义修改变量的方法

const mutations = {
  setToken(state, value) {
    state.token = value
    Cookiejs.set('hr67', value)
  },
  setUserInfo(state, value) {
    state.userInfo = value
  }
}

3.在action调用接口获取数据

const actions = {
  // 登录
  async toLogin(store, from) {
    const res = await sysLogin(from)
    Message.success('登录成功')
    store.commit('setToken', res.data)
  },
  // 获取用户信息
  async getUserInfo({ commit }) {
    const res = await sysProfile()
    commit(' setUserInfo', res.data)
  }
}

分析

sysLogin方法sysProfile这两个方法都通过:

import { sysLogin } from '@/api/login'
import { sysProfile } from '@/api/user'

导入进来了

通过commit来触发mutations里面的方法。

然后在mutation里面进行变量的修改。

触发state的唯一方法，就是mutations。

这是在本模块进行触发的。

如果在其它的页面进行触发呢？

假设点击登录页面进行触发:

  submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          // const res = await sysLogin(this.form)
          // this.$store.commit('user/setToken', res.data)
          // console.log(res)
          // this.$message.success('验证成功')
          await this.$store.dispatch('user/toLogin', this.form)
          this.$router.push('/')
        }
      })
    }

格式:

通过  this.$Store.dispatch('模块名/方法名'，参数)。

然后,通过toLogin里面的commit方法来去触发actions进行修改

总结:

1.修改state唯一的方式就是通过actions

2.触发mutations的方法是通过commit方法

3.触发actions的方法是通过dispatch。

4.如果注册成了模块在其它页面进行触发,需要加上模块的名字

 举例:

await this.$store.dispatch('user/toLogin', this.form)

在登录的页面进行触发。

5. 通常情况下先触发actions来调用接口获取数据,然后在再actions里面通过commit去

触发mutations方法从而达到修改state数据的目的。

4.getters

这个类似于计算属性。

5.modules

注册成不同的模块        

6.view图

 

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！