vue3中使用vuex

vue3中使用vuex

1,下载vuex

npm install vuex@next --save

2,查看下载

3,目录下新建store文件夹

4,创建index.js

import { createStore } from 'vuex'; //引入vuex
import app from './modules/app'; //引入modules的方法;
import getters from './getters' //引入getters
const store = createStore({
    modules: {
        app
    },
    getters
})

export default store; //导出

5,在modules中创建app.js / 同级目录下创建getters.js

模拟计数器实例功能

// app.js

import axios from "axios";
// 声明变量
const state = {
    num: 0,
    data: {},
    data1: null
};

// 修改变量（state不能直接赋值修改，只能通过mutations）
const mutations = {
    add: (state) => {
        state.num++;
    },
    // 参数一：state，参数二：新值
    addMath: (state, num) => {
        state.num += num;
    },
    //模拟请求
    getData(state, data) {
        state.data = data;
    },
    getData1(state, data) {
        state.data1 = data;
    }
};
// mutations的值由actions传入
const actions = {
    addAsync: ({ commit }) => {
        setTimeout(() => {
            commit('add');
        }, 1000);
    },
    // 参数一：自带属性，参数二：新值
    addAsyncMath: ({ commit }, num) => {
        setTimeout(() => {
           // 修改addMath的值
            commit('addMath', num);
        }, 1000);
    },
    request: ({ commit }) => {
        //返回一个promise
        return new Promise((resolve, reject) => {
            //模拟请求
            let httpOption = axios.post;
            httpOption("/api/**/****/*****").then(v => {
                resolve(data);
                //修改getData的值
                commit('getData',data);
            }).catch(err => reject(err));
        })
    },
    request1: ({ commit }) => {
        //返回一个promise
        return new Promise((resolve, reject) => {
            //模拟请求
            let httpOption = axios.get;
            httpOption("/api/**/****/*****").then(v => {
                resolve(data);
                //修改getData的值
                commit('getData1',data);
            }).catch(err => reject(err));
        })
    },
};

export default {
    state,
    mutations,
    actions
}

// getters.js

const getters = {
    num: state => state.app.num //导出num
}
export default getters;

6,main.js中引入store.js

import store from './store'

7,在页面中使用

<template>
  <div>
  //计算属性获取的信息
    <div>数字 :{{ num }}</div>
    <el-button @click="add">+1</el-button>
    <el-button @click="addAsync">延迟+1</el-button>
  </div>
  <div>
    <el-button @click="request">模拟请求</el-button>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
const store = useStore();

//获取num
const num = computed(() => store.state.app.num);

// --- 

function add() {
  //   store.commit("add");
  store.commit("addMath", 5);
}
function addAsync() {
  //   store.dispatch("addAsync");
  store.dispatch("addAsyncMath", 10);
}
// Promise（需要用异步同步来接），async（异步），await （同步）
async function request() {
  let res = await store.dispatch("request");
  console.log(res);
}
</script>
<style lang="scss" scoped>
div {
  color: #fff;
}
</style>