Vuex模块化使用

Vuex模块化使用

首先我们熟悉下vuex的基本功能：

1.state 统一定义管理公共数据

2.mutations: 使用它来修改数据

3.getters: 类似于vue中的计算属性

4.actions: 类似于methods,用于发起异步请求,比如axios

5.modules: 模块拆分

最基本的写法是这样的：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: { // 存放数据 和data类似
  },
  mutations: { // 用来修改state和getters里面的数据
  },
  getters: { // 相当于计算属性
  },
  actions: { // vuex中用于发起异步请求
  },
  modules: {// 拆分模块
  }
})

当项目复杂，我们可以模块化拆分用modules来拆分复杂业务。

1.文件结构

modules文件下是具体模块，可以有很多个。

2.index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

3.getters.js

const getters = {
  username: state => state.user.username,
  userRoles: state => state.user.userRoles,
  name: state => state.user.name,
  phone: state => state.user.phone,
  id: state => state.user.id,
  token: state => state.user.token,
  refreshToken: state => state.user.refreshToken,
  leftnavnum: state => state.user.leftnavnum
}
export default getters

4. user.js

import {  getUserInfo } from '@/api/user'
const state = {
  username: localStorage.getItem('username'),
  name: localStorage.getItem('name'),
  phone: localStorage.getItem('phone'),
  userRoles: localStorage.getItem('userRoles'),
  id:localStorage.getItem('id'),
  token:localStorage.getItem('token'),
  refreshToken:localStorage.getItem('refreshToken'),
  leftnavnum:"",
}

const mutations = {

  clear(state){
    for(let i in state){
      delete state[i]
    }
  },

  setuserName: (state, value) => {
    state.username = value;
    localStorage.setItem('username', value);
  },

  setuserRoles: (state, value) => {
    state.userRoles = value
    localStorage.setItem('userRoles', value);
  },
  setname:(state, value) => {
    state.name = value
    localStorage.setItem('name', value);
  },
  setphone:(state, value) => {
    state.phone = value
    localStorage.setItem('phone', value);
  },
  setid:(state, value) => {
    state.id = value
    localStorage.setItem('id', value);
  },
  settoken:(state, value) => {
    state.token = value
    localStorage.setItem('token', value);

},
setRefreshToken:(state, value) => {
  state.refreshToken = value
  localStorage.setItem('refreshToken', value);

}
}

const actions ={

  getInfo({ commit, state }) {
    console.log(commit)
    console.log(state)
    return new Promise((resolve, reject) => {
      getUserInfo(state.id).then(response => {
        const temp = response
        console.log(temp)
        commit('setname', temp.data.name)
        commit('setuserName', temp.data.userName)
        commit('setphone', temp.data.phone)
        commit('setid', temp.data.id)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
}

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

5. 调用

 this.$store.commit("user/setuserName", userInfo.userName);

• commit调用的是mutations,在组件中通过this.$store.dispatch(‘actions的名字’, 参数)来调用action.
• 访问模块中的mutations/actions:

如果namespaced为true，则需要额外去补充模块名
如果namespaced为false，则不需要额外补充模块名

$store.commit('mutations名')        // namespaced为false
$store.commit('模块名/mutations名')  // namespaced为true

本文使用第二种。