vuex用法(vue3)

通过脚手架创建项目会自动创建store/index.js

1.vuex基本结构

import { createStore } from 'vuex'
export default createStore({
  // 全局的状态初始值
  state: {
  },
  // 计算state。获取对应的值
  getters:{
  },
  // 更新状态的方法-更新state的唯一方法，commit mutations
  mutations: {
  },
  // 可以异步操作，可以返回promise，更改数据还是传递到mutations去更改
  actions: {
  },
   // 数据比较多，分模块
  modules: {
  }
})

2.state的使用（在vue中获取count值。）

(1)定义count=1

  state: {
  count:1
  },

(2)vue中获取count值

import { useStore } from "vuex";

setup() {
    /* 使用vuex,获取state中的count */
    const store = useStore();
    const count = store.state.count;
    const data = reactive({
      loginData: {
        username: "",
        password: "",
      },
      num: count,
    });
 }
 <p>{{ num }}</p>  //num = 1

3.mutations的使用

(1)定义setCount方法

  mutations: {
    setCount(state,num){
      state.count = num
    }
  },

(2)vue中使用setCount方法

const handlerCount = () => {
 // 注意是store.commit
 store.commit("setCount", 102);
}
<el-button type="primary" @click="handlerCount">登录</el-button>

4.actions的使用

(1)定义setCountPromise方法

actions: {
    setCountPromise(context,num){
      return new Promise((resolve,reject)=>{
        if (num>100) {
          reject("值不能大于100");
        }else{
          context.commit('setCount',num);
          resolve()
        }
      })
    }
  },
 <el-button type="primary" @click="handlerCount">登录</el-button>

(2)vue中使用

const handlerCount = () => {
      // 调用actions中的方法
      store
        .dispatch("setCountPromise", 100)
        .then((res) => {
          alert("count修改成功");
        })
        .catch((err) => {
          alert(err);
        });
      console.log(store.state.count);
    };

5.getters的使用

(1)定义方法

  getters: {
    countState(state){
      return state.count <= 1
    }
  },

(2)vue中的使用

import { useStore } from "vuex";

setup() {
    /* 使用vuex,获取state中的count */
    const store = useStore();
    const count = store.state.count;
    console.log(store.getters.countState);
}

6.modules的使用

(1)总的store

import { createStore } from 'vuex'
import number from './number.store'
export default createStore({
  // 数据比较多，分模块
  modules: {
    number
  }
})

(2)子模块number

export default ({
    namespaced: true,
    // 全局的状态初始值
    state: {
        count: 1,
    },
    // 计算state。获取对应的值
    getters: {
        countState(state) {
            return state.count <= 1
        }
    },
    // 更新状态的方法-更新state的唯一方法，commit mutations
    mutations: {
        // 注意第一个参数是state
        setCount(state, num) {
            state.count = num
        }
    },
    // 可以异步操作，可以返回promise，更改数据还是传递到mutations去更改
    actions: {
        setCountPromise(context, num) {
            return new Promise((resolve, reject) => {
                if (num > 100) {
                    reject("值不能大于100");
                } else {
                    context.commit('setCount', num);
                    resolve()
                }
            })
        }
    },
})

(3)vue中的使用

console.log("修改前" + store.getters['number/countState']);
const count = store.state.number.count;
store.dispatch("number/setCountPromise", 100)
store.commit("number/setCount", 102);