Vuex简述

1. 概述

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
  • 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
  • 简单来说就是,多个组件共享数据的区域,当数据发生变化时,那么相应的组件也会相应地得到高效更新

2. 文件结构

• 在普通vue项目中

  • /store/index.js

    export default new Vuex.Store({
      state: {
        //存储和读取数据
        num : 0
      },
      mutations: {
        //修改num的方法
        updateNum(state,value){
          state.num = value
        }
      },
      actions: {//可以包裹mutations方法,使之可以异步操作
      },
      modules: {//模块化vuex
      }
    })
    

• 在nuxt项目中:

  • /store/index.js

    export const state = () => ({	
        //存放普通变量,所有组件都可以调用
    });
    
    const mutations = {       
        //调用mutations可以修改state中数据的值
    };
    
    const actions = {
        //可以包裹mutations中的方法,使之可以异步操作
    };
    

3. 数据操作

• state区域中数据的获取

  //完整写法
  this.$store.state.变量名
  
  //简化写法
  import {mapState} from 'vuex'
  //放在component计算属性中,将其放入computed计算属性中,可以实时监测
  ...mapState(['变量名'])
  

• mutations中方法的调用

  //完整写法
  this.$store.commit('方法名',value)
  
  //简化写法
  import {mapMutations} from 'vuex'
  //放在methods中
  ...mapMutations(['方法名'])
  //调用
  方法名(value)