vuex简述

  • Z时代
  • 2024-01-10
  • 分类：综合

编程

  • /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)

    以上是 vuex简述 的全部内容， 来源链接： utcz.com/z/514347.html

    回到顶部