下班前几分钟，我学会了如何使用 Vuex

name: ‘leo’

}

});

export default store;

修改 main.js：

import Vue from ‘vue’;

import App from ‘./App’;

import store from ‘./store’; // 引入我们前面导出的store对象

Vue.config.productionTip = false;

new Vue({

el: ‘#app’,

store, // 把store对象添加到vue实例上

components: { App },

template: ‘’

});

最后修改 App.vue：

建议一：this.$store.state.xxx 放在计算属性中，这样可以让你的代码看起来更优雅一些。

export default {

mounted() {

console.log(this.getName); // ‘leo’

},

computed:{

getName() {

return this.$store.state.name;

}

}

}

建议二：每次都写 this.$store.state.xxx 让你感到厌烦，造成代码冗余，可以使用 mapState。

你甚至可以给它取别名：

…mapState({ userName: ‘name’ }) // 赋别名的话，这里接收对象，而不是数组

3、Getters 修饰值

设想一个场景，你已经将 store 中的 name 展示到页面上了，而且是很多页面都展示了，此时客户要求在每个 name 前都加上“hello”。

最容易想到的办法就是去每个用到 name 的页面一个一个加上“hello”，显然这种方式并不友好，原因如下：

• 第一，假如你在A、B、C三个页面都用到了 name，那么你要在这A、B、C三个页面都修改一遍，多个页面你就要加很多遍这个方法，造成代码冗余，很不好。

• 第二，假如下次客户让你把“hello”改成“greet”的时候，你又得把三个页面（甚至更多）都改一遍，这时候你是拿石头砸自己的脚。

吸取上面的教训，我们有一个新的思路：直接在 store 中对 name 进行一些操作或者加工，从源头解决问题！这时候，Getter 闪亮登场！

首先，在 store 对象中增加 getters 属性：

const store = new Vuex.Store({

state: {

name: ‘leo’

},

// 在store对象中增加getters属性

getters: {

getMessage(state) { // 获取修饰后的name，第一个参数state为必要参数，必须写在形参上

return hello ${state.name};

}

}

});

在组件中使用：

export default {

mounted() {

console.log(this.$store.state.name);

console.log(this.$store.getters.getMessage);//注意不是$store.state了，而是$store.getters

}

}

建议使用 mapGetters：

你也可以给它取别名：

…mapGetters({ greetMsg: ‘getMessage’ }) // 赋别名的话，这里接收对象，而不是数组

4、Mutations 修改值

说到修改值，有的人可能会想到这样写：

this.$store.state.xxx = XXX;

首先，这是一种错误的写法。为什么说是错误的写法？因为这个 store 仓库比较奇怪，你可以随便拿，但是你不能随便改，举个例子：

假如你打开朋友圈，看到你的好友发了条动态，但是动态里有个错别字，你要怎么办呢？你可以帮他改掉吗？当然不可以！我们只能通知他本人去修改，因为是别人的朋友圈，你是无权操作的，只有他自己才能操作。同理，在 Vuex 中，我们不能直接修改仓库里的值，必须用 Vuex 自带的方法去修改。这个时候，Mutation 闪亮登场！

首先，修改 store/index.js：

const store = new Vuex.Store({

state: {

name: ‘leo’,

number: 0,

},

mutations: { // 增加nutations属性

setNumber(state) { // 增加一个mutations的方法，方法的作用是让number从0变成5，state是必须默认参数

state.number = 5;

}

}

});

然后，修改 App.vue：

如果我们想传动态参数怎么办？

首先，修改 store/index.js：

const store = new Vuex.Store({

state: {

name: ‘leo’,

number: 0,

},

mutations: {

setNumber(state, num) { // 增加一个带参数的mutations方法

state.number = num;

},

},

});

相应地，修改 App.vue：

上面的这种传参的方式虽然可以达到目的，但是并不推荐。建议传递一个对象，看起来更美观，对象的名字你可以随意命名，一般命名为 payload：

mutations: {

setNumber(state, payload) { // 增加一个带参数的mutations方法，并且官方建议payload为一个对象

state.number = payload.number;

},

},

相应地，修改 App.vue：

建议使用 mapMutations：

你也可以给它取别名：

methods:{

…mapMutations({ changeNumber: ‘setNumber’ }) // 赋别名的话，这里接收对象，而不是数组

}

注意：Mutations 里面的函数必须是同步操作，不能包含异步操作。

Mutations 只能进行同步操作，所以，我们马上开始下一节，看看使用 Actions 进行异步操作的时候应该注意什么！

5、Actions 异步修改值

Vuex 不希望你将异步操作放在 Mutations 中，所以就给你设置了一个区域，让你进行异步操作，这就是 Actions。

首先，修改 store/index.js：

const store = new Vuex.Store({

state: {

name: ‘leo’,

number: 0,

},

mutations: {

setNumber(state, payload) {

state.number = payload.number;

},

},

actions: { // 增加actions属性

setNum(content) { // 增加setNum方法，默认第一个参数是content，其值是复制的一份store

return new Promise(resolve => { // 模拟异步操作，1秒后修改number为666

setTimeout(() => {

content.commit(‘setNumber’, { number: 666 });

resolve();

}, 1000);

});

}

}

});

然后，修改 App.vue：

async mounted() {

console.log(this.$store.state.number); // 旧值，0

await this.$store.dispatch(‘setNum’); // 等待异步操作完成

console.log(this.$store.state.number); // 新值，666

}

其实 action 就是去提交 mutation 的。异步操作都在 action 中消化了，最后再去提交 mutation。

当然，你也可以进行动态传参。

首先，修改 store/index.js：

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
e/index.js：

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-iZRSRMJq-1715804360614)]

[外链图片转存中…(img-Fd9UuHAz-1715804360615)]

[外链图片转存中…(img-MeP5ML9R-1715804360615)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！