摘要：第二步就是调用，我在文件夹简历了个的文件，方便管理。然后在里面引入至此，安装基本完成，下面介绍这个东西的用法。其实这东西用法简单的一比，就是几个属性而已。例如然后在组件中直接调用这样就直接运行了这个方法。
项目终于做完了，博客也很久没更新了，写下这个项目用到的一些知识，以后大家也少踩点坑
第一步当然还是安装了，这里只介绍npm的安装方法，别的请自行百度。
npm install vuex --save
第二步就是调用，我在src文件夹简历了个store.js的文件，方便管理。然后在main.js里面引入
import store from "./store";
new Vue({
store,
render: h => h(App)
}).$mount("#app");
至此，安装基本完成，下面介绍这个东西的用法。vuex的好处我也不多说了，简单来说就是数据共享嘛，反正谁用谁知道。不要以为你的项目小就可以不用这个，它可以让你在开发中省掉很多事儿。
现在我的文件是这样的（项目框架是vue-cli3.0）：
接下来就开始在store里面写东西啦。其实这东西用法简单的一比，就是几个属性而已。最常用的就这四个:state,mutations,actions,getters.
state就是存死数据的，当然下面也可以改它的数据.
1.store
在store.js里面:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
box: 123
}
});
然后在你的组件里面引入一下(我这里直接引用了这四个家伙，实际开发的时候你用到啥引用啥就好，不然eslint又该出红线了)
import {
mapGetters,
mapState,
mapMutations,
mapActions
} from "vuex";
然后在计算属性里面写
computed: {
...mapState(["box"])
},
接下来在template里面直接调用，这个数据是共享的，在每一个组件里面想用都可以直接这么引入调用(加个点击事件，下面要用下)
{{box}}
哈哈，界面里面估计都已经显示了123了吧。就是这么简单。
2.mutations
接下来看mutations，这个属性主要是修改store存储的值的，就比如说刚才那个box，就可以用这个玩意儿修改。
在store里面接着上面的写
export default new Vuex.Store({
state: {
box: 123
},
mutations: {
someMutation(state, count) {
state.box += count;
}
}
});
这个里面有两个参数，state,count，state就是上面那个state，count就是你要传入的数据，当然，你不传东西也可以，只是个方法而已。我这随便写了个案例。
接下来在你的组件里面的调用，这里调用是在methods里面写，毕竟人家是方法嘛，对吧！
...mapMutations(["someMutation"]),
btn(){
this.someMutation(22);
}
这里我传了个值为22，写在了点击事件里面，然后就是开始点击,相信你现在看到已经变成145了。
3.actions
actions里面也是两个参数, 例如在store.js里面这么写：
actions: {
getbox2(context,s) {
return context.box;
}
}
我们可以通过第一个参数context来获取state或者getter里面的值，context.state或者context.getters直接就可以获取第二个参数s，就是我们传的值。
在组件里面我们直接这么写
methods:{
...mapActions(["getbox2"]),
...mapMutations(["someMutation"])
}
然后直接调用
mounted(){
this.getbox2(1234).then((res)=>{
console.log(res)
})
}
这里打印出来的是根据刚才在store里面返回的值有关，
getbox2(context,s) {
return context.box;
}
这样返回的就是123，若是
getbox2(context,s) {
return s;
}
这么写返回的就是你传入的那个s，打印出1234.
actions还可以直接调用mutations的方法。例如
getbox2(context) {
return context.commit("someMutation");
}
然后在组件中直接调用
this.getbox2()
这样就直接运行了someMutation这个方法。值得一提的是actions是异步的，就是你想怎么用，想在哪用都是可以的。简单来说，就是你想改变state的值，就用mutations，如果你想用方法，就用actions
4.getters
getters就更加简单啦，直接在store里面，例如：
getters: {
getbox(state) {
return 1;
}
}
然后在组件的计算属性里面这么写：
computed: {
...mapGetters(["getbox"]),
...mapState(["box"])
},
然后在template里面直接拿来用，
{{ getbox }} {{box}}
简单来说，这东西就是vuex里面的计算属性，跟computed一个尿性。里面的state就是上面那个state。最终代码是这样的：
组件中:
{{ getbox }} {{box}}
在store.js中：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
box: 123
},
mutations: {
someMutation(state, count) {
// state.box += count;
state.box++;
}
},
actions: {
getbox2(context) {
return context.commit("someMutation");
}
},
getters: {
getbox(state) {
return state.box;
}
}
});
main.js中：
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
好了，大功告成，相信你们对这个所谓的状态管理工具有一定的了解了。有啥写的不太好的地方，请大家多多指教。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92074.html
摘要：将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。此示例使用类似的语法，称为。执行更快，因为它在编译为代码后进行了优化。基于的模板使得将已有的应用逐步迁移到更为容易。 前言 因为没有明确的界定,这里不讨论正确与否,只表达个人对前端MV*架构模式理解看法,再比较React和Vue两种框架不同.写完之后我知道这文章好水,特别是框架对比部分都是别人说烂的,而我也是打算把...
摘要：前端面试题总结持续更新中是哪个组件的属性模块的组件。都提供合理的钩子函数，可以让开发者定制化地去处理需求。 前端面试题总结——VUE（持续更新中） 1.active-class是哪个组件的属性？ vue-router模块的router-link组件。 2.嵌套路由怎么定义？ 在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 //引入两个组件 ...
摘要：作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本，的简称。的包管理工具，用于同一管理我们前端项目中需要用到的包插件工具命令等，便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通...
阅读 4394·2021-11-19 09:59
阅读 3321·2021-10-12 10:12
阅读 2632·2021-09-22 15:25
阅读 3323·2019-08-30 15:55
阅读 1185·2019-08-29 11:27
阅读 1464·2019-08-28 18:06
阅读 2738·2019-08-26 13:41
阅读 2556·2019-08-26 13:41
