2021-09-03 VUEX------store

tutou_girl

已于 2022-02-12 17:57:46 修改

阅读量142

点赞数

分类专栏： VUE 文章标签： vue.js node.js javascript

于 2021-09-03 20:39:13 首次发布

本文链接：https://blog.csdn.net/tutou_girl/article/details/120089604

版权

VUE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中使用Vuex进行模块化的状态管理和异步操作，包括设置状态（state）、处理变更（mutations）、执行动作（actions）以及利用getters简化数据获取。通过实例演示了store配置、模块导入和数据修改与获取的方法。

摘要由CSDN通过智能技术生成

VueX模块化开发
在这里插入图片描述

首先建立一个模块化文件monitor，四个部分state，mutations，actions（不能直接修改state中的数据，修改只能通过mutations），getters计算属性，项目当中getters主要的作用是:简化仓库中的数据(简化数据而生)（getters放在统一的文件getters了）
总之就是，action调用mutations，mutations修改state，action中放异步操作。

import Vue from 'vue'



const monitor = {
  state: {
    //存储对象属性 value,text
    maxMonitorNumber: '',
  },
  mutations: {
    SET_maxMonitorNumber: (state, maxMonitorNumber) => {
      console.log('maxMonitorNumber',maxMonitorNumber)
      Vue.set(state, 'maxMonitorNumber',maxMonitorNumber)
    }
  },
  actions: {
  }
}

export default monitor

把其它模块化文件的getters也放在了一起，也可以直接在模块化文件里定义。

import Vue from 'vue'
import { USER_INFO, ENHANCE_PRE } from "@/store/mutation-types"
const getters = {
  device: state => state.app.device,
  theme: state => state.app.theme,
  color: state => state.app.color,
  token: state => state.user.token,
  avatar: state => {state.user.avatar = Vue.ls.get(USER_INFO).avatar; return state.user.avatar},
  username: state => state.user.username,
  nickname: state => {state.user.realname = Vue.ls.get(USER_INFO).realname; return state.user.realname},
  welcome: state => state.user.welcome,
  permissionList: state => state.user.permissionList,
  userInfo: state => {state.user.info = Vue.ls.get(USER_INFO); return state.user.info},
  addRouters: state => state.permission.addRouters,
  onlAuthFields: state => {return state.online.authFields },
  enhanceJs:(state) => (code) => {
    state.enhance.enhanceJs[code] = Vue.ls.get(ENHANCE_PRE+code);
    return state.enhance.enhanceJs[code]
  },
  maxMonitorNumber: state => state.monitor.maxMonitorNumber

}

export default getters

新建store的全局index.js文件，并引入modules

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

import app from './modules/app'
import user from './modules/user'
import permission from './modules/permission'
import enhance from './modules/enhance'
import online from './modules/online'
import getters from './getters'
import monitor from './modules/monitor'

Vue.use(Vuex)

export default new Vuex.Store({
//modules中声明 monitor
  modules: {
    app,
    user,
    permission,
    enhance,
    online,
    monitor
  },
  state: {

  },
  mutations: {

  },
  //公用函数
  actions: {

  },
  //import了getters文件
  getters
})

引入main.js

import store from './store/'

function main() {
  new Vue({
    router,
    store,
    mounted () {
      store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
      store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
      store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
      store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
      store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
      store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
      store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
      store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
      store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
      store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
      store.commit('SET_MULTI_PAGE',Vue.ls.get(DEFAULT_MULTI_PAGE,config.multipage))
    },
    render: h => h(App)
  }).$mount('#app')

修改和获取

that.$store.commit('SET_maxMonitorNumber', that.model.maxScanNums);

注意是mutations里的方法

this.$store.getters.maxMonitorNumber

另一个例子
在这里插入图片描述
blog.js内容。

/*
 * @Author: he yan ying
 * @Date: 2022-02-08 17:24:05
 * @LastEditors: he yan ying
 * @LastEditTime: 2022-02-12 16:26:19
 * @Description: 
//  */
import Vue from 'vue'
import {reqTags} from '@/api/index'
const blog ={
  //相当于私有属性
  state: {
    tags:[]
  },

  //唯一修改state的地方
  mutations: {
   GET_TAG: (state, tags) => {
      state.tags = tags
    },
  },

  // 计算属性 项目当中getters主要的作用是:简化仓库中的数据(简化数据而生)
//可以把我们将来在组件当中需要用的数据简化一下【将来组件在获取数据的时候就方便了】
  getters: {
  },
  //书写异步操作
  actions: {
    //获取tag标签数据，异步操作所以用async
    async getTags({ commit }, params = {}) {
      //当前这个reqTags个函数在调用获取服务器数据的时候，至少传递一个参数（空对象）
      //params形参：是当用户派发action的时候，第二个参数传递过来的，至少是一个空对象
      let result = await reqTags(params);
      if (result.code == 200) {
        commit("GET_TAG", result.data);
      }
    },
  },
  modules: {}
}

export default blog

index.js是总的

/*
 * @Author: he yan ying
 * @Date: 2021-05-16 13:56:48
 * @LastEditors: he yan ying
 * @LastEditTime: 2022-02-12 15:42:18
 * @Description: 
 */
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import blog from './modules/blog'

Vue.use(Vuex)


export default new Vuex.Store({
  modules:{
    user,
    blog
  },
  state: {

  },
  mutations: {

  },
  actions: {

  },
  getters:{
    
  }
})