Vue3.0商店后台管理系统项目实战-vuex是什么（5大语法）

王小婷

发布于 2022-10-28 10:05:41

5600

发布于 2022-10-28 10:05:41

文章被收录于专栏：编程微刊编程微刊

参考资料

Vue3.0官方文档：https://cn.vuejs.org/ Element Plus文档：https://element-plus.gitee.io/zh-CN/

打开默认的stroe/index.js

vuex中一共有五个状态 State Getter Mutation Action Module 下面进行详细讲解

import { createStore } from 'vuex'

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

vuex的具体语法

1：state

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

首先在index.js里面初始一个数值

在登录界面login.vue引入store

在setup里面获取

在data里面定义

在页面展示一下

这个时候是可以拿到值的

2：mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

接下来进行修改 setCount里面有两个属性

在登录按钮上写一个点击事件

在页面触发登录按钮绑定触发事件

<el-button type="primary" @click="handleLogin()">登录</el-button>

打印一下结果

3：actions:进行异步操作

Action和Mutation相似，Mutation 不能进行异步操作，若要进行异步操作，就得使用Action

//可以一步操作，可以返回promise，根呷比如说修改 setCount(）是异步的

//可以异步操作,可以返回promise  更改数据还是传递到mutations去更改
  actions: {
    setCountPromise(context, num) {
      return new Promise((resolve, reject) => {
        if (num > 100) {
          reject("值不能大于100")
        } else {
          context.commit("setCount", num)
          resolve()
        }

      })
    }
  },

 const handleLogin = () => {
      //  store.commit("setCount", 100);

      store.dispatch("setCountPromise", 100)
        .then((res) => {
          alert("修改成功");
        })
        .catch((err) => {
          alert(err);
        });
      console.log(store.state.count);
    };

点击登录按钮弹出修改成功并打印100

4:Getters

类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据

 //计算state,获取对应的值
  getters: {
    countStatus(state){
      return state.count>=1
    }
  },

在login.vue里面去拿countStatus

   console.log("修改前getters", store.getters.countStatus);
    const handleLogin = () => {
      //  store.commit("setCount", 100);

      store
        .dispatch("setCountPromise", -100)
        .then((res) => {
          alert("修改成功");
        })
        .catch((err) => {
          alert(err);
        });
      console.log(store.state.count);
      console.log("修改后getters", store.getters.countStatus);
    };

5:Modules：分模块

当遇见大型项目时，数据量大，store就会显得很臃肿,为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

在store里面新建一个state的文件夹、在文件夹下新建num.state.js的文件

将store/index.js里面的vuex全部都剪切到num.state.js

num.state.js

export default {
    namespaced: true,

    //全局的状态初始化
    state: {
        count: 1,
    },
    //计算state,获取对应的值
    getters: {
        countStatus(state) {
            return state.count >= 1
        }
    },
    //更新状态的方法  更新state的唯一方法  commit  mutations
    mutations: {
        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()
                }

            })
        }
    },
  
}

store/index.js删减

import { createStore } from 'vuex'
import number from "./state/num.state.js"

export default createStore({
 
  //数据比较多，分模块
  modules: {
    number
  }
})

<template>
  <div class="login_wrap">
    <div class="form_wrap">
      <el-form
        ref="formRef"
        :model="loginData"
        label-width="100px"
        class="demo-dynamic"
      >
        <el-form-item
          prop="username"
          label="用户名"
          :rules="[
            {
              required: true,
              message: '此项为必填项',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="loginData.username" />
        </el-form-item>

        <el-form-item
          prop="password"
          label="密码"
          :rules="[
            {
              required: true,
              message: '此项为必填项',
              trigger: 'blur',
            },
          ]"
        >
          <el-input type="password" v-model="loginData.password" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleLogin()">登录</el-button>
          <p>{{ num }}</p>
          <!-- <el-button @click="addDomain">New domain</el-button>
      <el-button @click="resetForm(formRef)">Reset</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

//引入useStore
import { useStore } from "vuex";

export default {
  name: "login",
  setup() {
    const store = useStore();
    const count = store.state.number.count; 

    const data = reactive({
      loginData: {
        username: "",
        password: "",
      },
      num: count,
      // countStatus:
    });

    console.log("修改前getters", store.getters["number/countStatus"]);
    const handleLogin = () => {
      //  store.commit("setCount", 100);

      store
        .dispatch("number/setCountPromise", -100)
        .then((res) => {
          alert("修改成功");
        })
        .catch((err) => {
          alert(err);
        });
      console.log(store.state.number.count);
      console.log("修改后getters",store.getters["number/countStatus"]);
    };
    return {
      ...toRefs(data),
      handleLogin,
    };
  },
};
</script>
<style scoped>
.login_wrap {
  width: 100%;
  height: 100vh;
  background: #2d3761;
  position: relative;
}
.form_wrap {
  position: fixed;
  top: 50%;
  transform: translate(130%, -50%);
  background: #fff;
  padding: 30px 50px;
  border-radius: 5px;
}
</style>

修改成功之后看一下效果