modules

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

屬性訪問
<h2>訪問store modules</h2>
<h3>{{ $store.state.a.name }}</h3>

作者：彼岸舞

時間：2021\06\28

內容關於：VUE

本文屬於作者原創,未經允許,禁止轉發