通过脚手架创建项目会自动创建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);
标签:count,num,state,实例,vue3,const,vuex,store
From: https://www.cnblogs.com/hutongtree/p/16707906.html