一、vuex 安装配置
- 安装
npm install vuex -S
- 在 main.js 中挂载 store
import store from "./store";
const app = createApp(App);
app.use(store);
- 注意事项
修改 state 只能通过 commit 一个 mutation 的方式
1. 同步修改state：只能通过 commit 一个 mutation 的方式来修改 state 状态，不可直接改变
2. 异步修改state：只能通过 dispatch 一个 action 的方式，然后在 action 中 commit 一个 mutation，来修改 state 状态，不可直接改变
3. 无法在 mutation 中异步修改state的原因是：在 mutation 中无法 commit 一个 mutation，只有在 action 中才可 commit 一个 mutation
4. 在vue3中的vuex中的store中的state是响应式的数据，可通过响应式解构的方式使用
二、vuex 简单使用
- 创建 src\store\index.js 配置文件
import { createStore } from "vuex";
const state = {
a: 1,
};
const getters = {
ga: (state) => {
return state.a * 2;
},
gga: (state, getters) => {
return state.a * 2 + getters.ga;
},
};
const mutations = {
SYNCA: (state, params) => {
state.a = params;
},
};
const actions = {
ASYNCA: async ({ state, commit, dispatch, getters }, params) => {
console.log(state);
console.log(commit);
console.log(dispatch);
console.log(getters);
console.log(params);
// 模拟异步请求数据
const data = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
params ? resolve(params + 1000) : reject(0);
}, 2000);
});
};
const getData = await data();
// 获取到数据后 commit 一个 SYNCA 来修改state
commit("SYNCA", getData);
// 如果有部分数据没有在store的state中定义，但是需要在组件中使用，也可以通过返回 promise 的方式异步处理
// return getData;
},
};
export default createStore({
state,
getters,
mutations,
actions,
modules: {},
});
- 在组件中使用
可以直接在
template模板中使用$store，但是无法在 setup 函数中使用this.$store（不推荐），建议通过const store = useStore();方式使用，可以同时在 setup 和 template 中使用
<template>
<div>{{ store.state.a }}</div>
<div>{{ store.getters.ga }}</div>
<button @click="setSYNCA">setSYNCA + 2</button>
<button @click="setASYNCA">setASYNCA + 1000</button>
</template>
<script>
import { useStore } from "vuex";
export default {
setup() {
const store = useStore();
// 同步修改state
function setSYNCA() {
store.commit("SYNCA", store.state.a + 2);
}
// 异步修改state
function setASYNCA() {
store.dispatch("ASYNCA", 1);
// 如果在 action 中，返回了一个 promise 数据，可以使用链式的方式获取数据
// store.dispatch("ASYNCA", 1).then((res) => console.log(res)).catch((err) => console.log(err));
}
return { store, setSYNCA, setASYNCA };
},
};
</script>
三、vuex 模块化使用
- 创建 src\store\index.js 主配置文件
import { createStore } from "vuex";
import aaa from "./aaa";
import bbb from "./bbb";
export default createStore({
modules: {
aaa,
bbb,
},
});
- 创建 src\store\aaa.js 模块配置文件
const state = {
a: 1,
};
const getters = {
ga: (state) => {
return state.a * 2;
},
gga: (state, getters) => {
return state.a * 2 + getters.ga;
},
};
const mutations = {
SYNCA: (state, params) => {
state.a = params;
},
};
const actions = {
ASYNCA: async ({ state, commit, dispatch, getters }, params) => {
console.log(state);
console.log(commit);
console.log(dispatch);
console.log(getters);
console.log(params);
// 模拟异步请求数据
const data = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
params ? resolve(params + 1000) : reject(0);
}, 2000);
});
};
const getData = await data();
// 获取到数据后 commit 一个 SYNCA 来修改state
commit("SYNCA", getData);
// 如果有部分数据没有在store的state中定义，但是需要在组件中使用，也可以通过返回 promise 的方式异步处理
// return getData;
},
};
export default {
namespaced: true,
state,
mutations,
actions,
getters,
};
- 在组件中使用
子模块state里的属性调用 ：store.state.模块名.属性名
子模块getters里的属性调用 ：store.getters['模块名/属性名']
子模块mutions里的方法调用 ：store.commit('模块名/方法名', '参数')
子模块actions里的方法调用 ：store.dispatch('模块名/方法名', '参数')
<template>
<div>{{ store.state.aaa.a }}</div>
<div>{{ store.getters["aaa/ga"] }}</div>
<button @click="setSYNCA">setSYNCA + 2</button>
<button @click="setASYNCA">setASYNCA + 1000</button>
</template>
<script>
import { useStore } from "vuex";
export default {
setup() {
const store = useStore();
// 同步修改state
function setSYNCA() {
store.commit("aaa/SYNCA", store.state.aaa.a + 2);
}
// 异步修改state
function setASYNCA() {
store.dispatch("aaa/ASYNCA", 1);
// 如果在 action 中，返回了一个 promise 数据，可以使用链式的方式获取数据
// store.dispatch("ASYNCA", 1).then((res) => console.log(res)).catch((err) => console.log(err));
}
return { store, setSYNCA, setASYNCA };
},
};
</script>
网友评论