参考资料
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
}
})
login.vue里面也需要修改一下
<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>
修改成功之后看一下效果
网友评论