大家好，今天要给你们介绍两个好朋友——Vue-CLI和Vuex。Vue-CLI就是搭建Vue项目的神奇工具，能让我们快速建立文件模板，让Vue开发变得更简单好玩~那么，这个神器怎么用？不要着急，马上告诉你！
想给电脑装个Vue-CLI吗？超简单！只需要在命令行输入”npm install –global vue-cli”。然后用”vue -V”检查下安装的版本。搞定了！赶紧开启你的Vue开发之旅！
挺神奇？只需在命令行敲打”vue init webpack 项目名”，就可以轻松创建Vue项目！为你提供了设定名称、简介还有需不需要安装依赖包等选项~按提示操作，你也能拥有专属于你的Vue项目！别犹豫了，赶快动手试一试！
console.log(store.state.count)
听说过Vuex吗?就是专门为Vue.js开发的一种状态管理工具，对于中大型的SPA项目来说，简直是必备利器！那么，你是不是也想学习如何使用？别急，我这就跟你好好说说。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
是不是觉得有些Vue组件要交换不少参数，这样很麻烦而且容易出错，有点划不来对？别担心，这个问题就交给Vuex这把神器来解决！其实它主要就是几个东西：state、getter、mutation、action和module，学会怎么灵活运用它们，你就能轻松操纵数据！
store.commit('increment')
学Vuex之前得先把它的文件导入到你的项目main.js里面，这样就可以尽情享受Vuex带给我们的便利！记住用store的时候，已注册好的Vue组件就从computed属性那里直接使用$store.state中的信息呗~
actions: {
incrementAction (context) {
context.commit('increment')
}
}
store.dispatch('incrementAction') //通过分发来调用action
想知道怎么在Vue组件中修改store值吗？告诉你用commit这个方法就行！直接处理data，就这么简单。试试看，肯定让你大开眼界
好了，今天的小课堂就到这儿了。希望大家看过这篇分享，都能大概了解什么是Vue-CLI和Vuex。这俩货能让你们在做Vue开发时事半功倍，让整个项目井井有条。赶快去试试它们，保证你会爱上的！昨天我们说了下如何使用Vue-CLI和Vuex的方法，希望大家看过之后，能对它们有更多的理解。这两个好工具无论是对 chromatin 还是Vuex，都能带来很大帮助。那还等啥？赶快尝试一番！别忘了给我点个赞、留个言、再转发分享！
const store=new Vuex.Store({
state:{
count:10
},
mutations:{
increment(state){ //只有通过mutation中的方法才可修改store中的值
state.count++;
}
}
});
评论0