vuex 简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
通俗的来说,vuex是用于当某一状态需要在多个组件中共享,方便我们使用并追踪这些状态时使用。

1,vuex的总体结构

vuex的总体结构分为 modules下面的所有子模块和根模块(即全局状态) 这里我把rootState这个根模块放到了modules文件夹的外面,当然也可以放到里面;最后就是在index 统一进行整合。

在这里插入图片描述

2,各子模块的内部结构及作用

这是vuex的内部代码结构,所有的子模块都是一样的;
state:存放数据状态;
action:指派mutation ;
mutation:修改state里面的状态;
getter:侧重于对数据的再次加工;
mdules:用于模块化;

我们更倾向于把异步请求放到action里面,当然vuex官方也有意这么做;一是为了追踪状态,二是为了做代码隔离,通常不受控的代码集中到action;受控的操作放到 mutation中,mutation只做纯函数的状态改变;

dialog.js

/**
 * 弹窗组件模块 属于子模块
 */
const state = {
  dialog: '我是dialog',
};

const actions = {
  // 把 commit属性从 context里面解构出来
  setDialog: ({ commit }, dia) => commit('commitDialog', dia),
};

// 使用 mutation更新 state
const mutations = {
  commitDialog: (state, dialog) => (state.dialog = dialog),
};

// 把数据导出时可以对数据做一些操作 但不会改变原数据
const getters = {
  currentDialog: (state) => state.dialog + '123',
};

export default {
  state,
  mutations,
  actions,
  getters,
  namespaced: true,
};
// namespaced: true  命名空间这一行一定要写,这是vuex寻找子组件的依据;

注意:这个设计和组件传值一样,是一个单向的数据流:是为了方便管理各个状态,知道状态在哪一步发生了改变,便于状态的维护和使用;

3,index 文件的结构

上面是引入各个子模块的文件,下面在modules对象里面使用,要注意根模块一定要放在modules外面,因为他是特殊的,这边用扩展运算符直接把roortState解构进来了。
注意:这里面用到了持久化缓存插件 vuex-persistedstate 解决了vuex刷新页面状态丢失的问题,通过这个插件把vuex里面的数据都储存到了localStorage里面;当然你也可以放到sessionStorage里面;只不过要这样写:
plugins: [createPersistedState({
storage: window.sessionStorage
})]

index.js

import Vue from 'vue';
import Vuex from 'vuex';
// 持久化缓存
import createPersistedState from 'vuex-persistedstate';
// 下面引入子模块
import rootState from './rootState'; // 根模块状态管理引入
import dialog from './modules/dialog';
import videoState from './modules/videoState';

Vue.use(Vuex);

export default new Vuex.Store({
  ...rootState, // 这里存放的是根模块 也就是全局模块
  modules: {
    dialog,
    videoState,
  },
  // 把vuex里面的所有数据都储存到了localStorage里面 不用担心刷新数据丢失的问题
  plugins: [createPersistedState()],
});

4,开始使用

这是对以下代码的使用说明,主要配合了vuex辅助函数来进行使用;

1,getDialog() 方法使用子模块dialog 里面的setDialog方法改变了子模块的状态;
2,getDialogGetter() 方法使用子模块dialog 里面的Getter属性获取了改变之后的数据;
Getter用于对Store中的数据进行加工,处理形成新的数据,不会修改Store中的原数据,类似计算属性。但Store中数据发生变化,Getter的数据也会跟着变化;
3,getRootState() 方法使用根组件的setRootStatue方法改变了全局状态,注意:获取根组件的方法时 后面要加上 {root:true} 来标明这是根组件;可以参考我下面的写法;
4 ,getRootState2() 方法可以直接获取根组件里面的状态;这里在业务逻辑上可以做一些判断什么的

页面中使用:

<template>
  <!-- 父组件 -->
  <div class="dialog">
    <button @click="getDialog">使用子组件dialog里面的方法改变状态</button>
    <br />
    <button class="_getter" @click="getDialogGetter">获取弹窗组件getter返回的数据</button>
    <br>
    <button class="_getter" @click="getRootState">使用根模块里面的方法</button>
    <br>
    <button class="_getter" @click="getRootState2">获取根模块里面的数据</button>
  </div>
</template>

<script>
// 1.引入辅助函数
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default {
  name: '',
  mixins: [],
  components: {
  },
  props: {},
  data() {
    return {
    };
  },
  computed: {
    // mapState 和 mapGetters
    ...mapState('dialog', ['dialog']),

    // 这里想要访问根模块里面的方法  需要这样写后面加上 {root:true}
    ...mapState(['rootStatue',{root:true}]),
    ...mapGetters('dialog', ['currentDialog']),

  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 2,使用
    ...mapActions('dialog', ['setDialog']),

    // 这里想要访问根模块里面的方法  需要这样写后面加上 {root:true}
    ...mapActions(['setRootStatue',{root:true}]),
    
	// 使用子组件dialog里面的方法改变状态
    getDialog() {
      console.log('之前的数据:', this.dialog);
      // 3,改状态
      this.setDialog('nihao');
      //4,查看是否改动成功  改动成功
      console.log('之后的数据:', this.dialog);
    },

    // 获取getter里面的内容
    getDialogGetter() {
      let dialogGetter = this.currentDialog;
      console.log('获取getter里面返回的数据:', dialogGetter);
    },

    // 使用根模块里面的方法改变状态
    getRootState(){
      console.log('之前的数据:', this.rootStatue);
      this.setRootStatue('false')
      console.log('改变后的数据:', this.rootStatue);
    },

    // 获取根模块里面的数据
    getRootState2(){
      console.log("根模块的数据:",this.rootStatue);
    },

  },
};
</script>

<style scoped lang="scss">
.tipsDialog {
  cursor: pointer;
}
._getter {
  display: block;
  margin-top: 10px;
}
</style>

rootState根组件里面的结构

/**
 * 根模块 储存全局状态管理 
 */
 const state = {
    rootStatue:'true',
  };
  // 使用 mutation更新 state
  const mutations = {
    commitRootStatue: (state, sta) => (state.rootStatue = sta),
  
  };
  const actions = {
    setRootStatue:({commit},sta)=> commit('commitRootStatue',sta,)
  };
  
  const getters = {
    
  };
  
  export default {
    state,
    mutations,
    actions,
    getters,
    namespaced: true,
  };
  

5,总结

vuex中一共有五个状态 State Getter Mutation Action Module ;需要知道他们的关系和侧重点;

  • Action: 侧重请求数据以及对业务逻辑的判断处理等;

  • Mutation: 侧重于对state里面的状态的修改;

  • Getter : 侧重于对数据的再次加工和处理,如果你对数据的修改或使用却不想改变原数据;那么你可以使用它;

  • Modules : 侧重于对多个状态的管理和分享;

Logo

前往低代码交流专区

更多推荐