从零开始学VUE之VueX(modules)

modules

代码语言：javascript复制

import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'

import {INCR} from "./type";

// 通过vue安装vuex
Vue.use(Vuex)

/**
 * 创建store
 * @type {Store<{counter: number}>}
 */
const store = new Vuex.Store({
  // 用于定义属性
  state:{
    counter:1000
  },
  // 定义用于修改属性的函数 同步提交
  mutations:{
    [INCR](state){
      state.counter =100;
    },
    // 第一个参数是 state
    modifyCounter(state){
      state.counter--;
    },
    // 传递参数
    modifyCounterVal(state,val){
      state.counter  = val;
    }
  },
  // 计算属性也就是getters 用于获取
  getters:{
    // 获取平方
    getCountPF(state) {
      return state.counter * state.counter;
    },
    // 获取 平方的2分之一
    getCountTwoOne(state, getters) {
      return getters.getCountPF / 2;
    },
    // 获取 平方的n分之一 参数传递
    getCountN(state,getters){
      return function (n){
        return getters.getCountPF / n;
      }
    }
  },
  // 用于处理异步状态修改
  actions:{
    updateInfo(context,playod){
      // console.log(playod)
      // // 模拟网络请求
      // setTimeout(() => {
      //   // 传参
      //   console.log(playod.message);
      //   // action 调用 mutations 修改
      //   context.commit(INCR);
      //   // 回调
      //   playod.success();
      // },1000)
      /**
       * 返回 Promise,让外面可以通过then捕获返回结果
       */
      return new Promise((resolve,reject) => {
        // 模拟网络请求
        setTimeout(() => {
          // 传参
          console.log(playod.message);
          // action 调用 mutations 修改
          context.commit(INCR);
          // 回调
          resolve("ajax return data!")
        },1000)
      })

    }
  },
  // 用于划分不同模块的状态的 里面可以写 state getters...
  modules:{
    a:{
      // 通过$store.state.a.name 调用
      state:{
        name:"a_modules"
      },
      // 通过$store.commit() 调用 方法名不要和外面的冲突
      mutations:{
        // 自己的state playod:参数
        getConsole(state,playod){
          return console;
        }
      },
      // 通过$store.getters.方法调用 方法名不要冲突
      getters:{
        // state:自己的 getters:自己的 rootState:外面的state
        getComputed(state,getters,rootState){
          state.name = "1111";
        }
      },
      // 通过$store.dispatch()调用
      actions:{
        // context:上下文对象 只能调用自己的mutations方法
        // 如果想获取外面的可以使用 context.rootGetters/...
        updateName2(context){

        }
      }
    }
  }
})

export default store
import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'

import {INCR} from "./type";

// 通过vue安装vuex
Vue.use(Vuex)

/**
 * 创建store
 * @type {Store<{counter: number}>}
 */
const store = new Vuex.Store({
  // 用于定义属性
  state:{
    counter:1000
  },
  // 定义用于修改属性的函数 同步提交
  mutations:{
    [INCR](state){
      state.counter =100;
    },
    // 第一个参数是 state
    modifyCounter(state){
      state.counter--;
    },
    // 传递参数
    modifyCounterVal(state,val){
      state.counter  = val;
    }
  },
  // 计算属性也就是getters 用于获取
  getters:{
    // 获取平方
    getCountPF(state) {
      return state.counter * state.counter;
    },
    // 获取 平方的2分之一
    getCountTwoOne(state, getters) {
      return getters.getCountPF / 2;
    },
    // 获取 平方的n分之一 参数传递
    getCountN(state,getters){
      return function (n){
        return getters.getCountPF / n;
      }
    }
  },
  // 用于处理异步状态修改
  actions:{
    updateInfo(context,playod){
      // console.log(playod)
      // // 模拟网络请求
      // setTimeout(() => {
      //   // 传参
      //   console.log(playod.message);
      //   // action 调用 mutations 修改
      //   context.commit(INCR);
      //   // 回调
      //   playod.success();
      // },1000)
      /**
       * 返回 Promise,让外面可以通过then捕获返回结果
       */
      return new Promise((resolve,reject) => {
        // 模拟网络请求
        setTimeout(() => {
          // 传参
          console.log(playod.message);
          // action 调用 mutations 修改
          context.commit(INCR);
          // 回调
          resolve("ajax return data!")
        },1000)
      })

    }
  },
  // 用于划分不同模块的状态的 里面可以写 state getters...
  modules:{
    a:{
      state:{
        name:"a_modules"
      }
    }
  }
})

export default stor

app.vue

代码语言：javascript复制

属性访问
<h2>访问store modules</h2>
<h3>{{ $store.state.a.name }}</h3>

app

0 人点赞