Web前端最全vuex概括与使用，【推荐】

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

npm install vuex --save

复制代码

在main.js中引入后即可使用。

// The Vue build version to load with the import command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

//vuex使用

import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

//全局变量

count: 31231

}

})

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

//vuex必须加入

store,

components: { App },

template: ‘’

})

复制代码

3.vuex的使用

老大有{{showData}}

复制代码

老二有{{$store.state.count}}

复制代码

4.流程介绍

如图当没有使用vuex时流程为： view->actions->state->view

​

使用了vuex后流程为vuecomponent->(dispatch)actions->(commit)mutations->(mutate)state->(render)->vuecomponent

5.mutation

状态更改，更改 Vuex 的 store 中的状态的唯一方法是提交mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

// The Vue build version to load with the import command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

//vuex使用

import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

//全局变量

count: 31231

},

//更改状态方法

mutations: {

//state为上面的state

addData(state) {

// 变更状态

state.count++

}

}

})

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

//vuex必须加入

store,

components: { App },

template: ‘’

})

复制代码

然后执行更改

老大有{{showData}}

修改按钮

复制代码

6.getters过滤

可以限制mutation 比如小于0就不能减少了

// The Vue build version to load with the import command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

//vuex使用

import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

//全局变量

count: 0

},

//更改状态方法

mutations: {

//state为上面的state

addData(state) {

// 变更状态

state.count++

}

},

//过滤

getters: {

getState(state) {

if (state.count >= 5) {

return 5

} else {

return state.count

}

}

}

})

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

//vuex必须加入

store,

components: { App },

template: ‘’

})

复制代码

调用时

老二有{{$store.getters.getState}}

复制代码

7.Action–异步处理

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 mutation只能同步处理 main.js。示例如下：

// The Vue build version to load with the import command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

//vuex使用

import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

//全局变量

count: 0

},

//更改状态方法

mutations: {

//state为上面的state

addData(state) {

// 变更状态

state.count++

}

},

//过滤

getters: {

getState(state) {

if (state.count >= 5) {

return 5

} else {

return state.count

}

}

},

actions: {

//action触发的mutations方法 优势是异步处理

addData(context) {

//模拟异步

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。