提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
一、main.js：挂载
提示：这里可以添加本文要记录的大概内容：
import store from './store/index';
Vue.prototype.$store = store;
提示：以下是本篇文章正文内容
二、index.js：导出 store
import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
app,
},
});
export default store;
三、app.js：导出app模块
/**
* @example
* 1、state
* this.$store.state.app.user.name
*
* 2、mutations
* this.$store.commit("app/setUser", { name: "熊熊", age: 12, sex: "男" });
*
* 3、actions
* (1) 以载荷形式访问
* this.$store.dispatch("app/updateUser",{ name: "嘻嘻", age: 11, sex: "女" });
* (2) 以对象形式访问
* this.$store.dispatch({
* type: "app/updateUser",
* user: { name: "憨憨", age: 11, sex: "女" },
* });
*
* 4、getters
* (1) 不带参数
* this.$store.getters["app/getAll"]
* (2) 带参数
* this.$store.getters["app/getByIndex"](0);
*/
const app = {
state: {
user: {
name: "小明",
age: "20",
sex: "男",
},
},
mutations: {
setUser(state, user) {
state.user = user;
},
},
actions: {
updateUser(context, obj) {
// 以载荷形式
context.commit("setUser", obj);
// 以对象形式
// context.commit("setUser", obj.user);
},
},
getters: {
// 通过属性访问
getName(state) {
return "名字：" + state.user.name;
},
getAge(state) {
return "年龄：" + state.user.age;
},
getsex(state) {
return "性别" + state.user.sex;
},
getAll(state) {
const {
name, age, sex } = state.user;
return "名字：" + name + "\n" + "年龄：" + age + "\n" + "性别" + sex;
},
// 通过方法访问
getByIndex: (state) => (index) => {
const {
name, age, sex } = state.user;
switch (parseInt(index)) {
case 0:
return "名字：" + name;
case 1:
return "年龄：" + age;
case 2:
return "性别" + sex;
case 3:
return "名字：" + name + "\n" + "年龄：" + age + "\n" + "性别" + sex;
default:
return "";
}
},
},
//使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
namespaced: true,
};
export default app;
四、目录结构
五、具体使用
1、state
(1) 方式一
// this.$store.state.模块名称.模块属性
this.$store.state.app.user.name
(2) 方式二：辅助函数mapState
// 引用user：this.user
import {
mapState } from 'vuex'
computed: {
...mapState({
user: (state) => state.模块名称.模块属性
}),
},
2、getters
(1)方式一
/*不带参数
* this.$store.getters['模块名/xxx']
* 带参数
* this.$store.getters['模块名/xxx']()
*/
this.$store.getters["app/getAll"]
this.$store.getters["app/getByIndex"](3)
(2)方式二：辅助函数mapGetters
// 引用userName：this.userName
import {
mapGetters} from "vuex";
computed: {
...mapGetters({
userName: "模块名/xxx",
}),
},
3、mutations
(1) 方式一
/*
* 1、mutation的事件类型：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。
* 在这个代码中，setUser就是mutation的一个事件类型。
* 2、载荷(payload)：指通过store.commit传入的额外参数。大多数情况下，载荷是一个对象
*
* this.$store.commit("模块名/mutations事件类型", 载荷)
*/
this.$store.commit("app/setUser", {
name: "熊熊", age: 12, sex: "男" })
(2)方式二：辅助函数mapMutations
import {
mapMutations } from "vuex";
methods: {
...mapMutations({
setUser: "模块名/mutations事件类型",
}),
example() {
this.setUser({
name: "熊熊", age: 12, sex: "男" });
},
},
4、actions
(1) 方式一
/*
* 1、以载荷形式分发
* this.$store.dispatch('模块名/方法',传参)
*
* 2、以对象形式分发
* this.$store.dispatch({
* type:'模块名/方法',
* 传参
* })
*/
this.$store.dispatch("app/updateUser",{
name: "嘻嘻", age: 11, sex: "女" });
this.$store.dispatch({
type: "app/updateUser",
user: {
name: "憨憨", age: 11, sex: "女" },
});
(2) 方式二：辅助函数mapActions
import {
mapActions } from "vuex";
methods: {
...mapActions({
updateUser: "模块名/方法" }),
example() {
this.updateUser({
name: "熊熊", age: 12, sex: "男" });
},
},
版权声明：本文为CSDN博主「蛙夏~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/y1238r/article/details/123703209