vuex其实这个概念在文档中很难准确理解,而它本身就是一个公共的数据仓库,例如你在登录百度页面时,你的登录状态,你在百度贴吧页面的登录状态与你在页面的登录状态实际上是一样的,这说明你需要一个公共的仓库来存储它,所以vuex基于此实践。
工具/原料
1
vue-cli
2
npm
方法/步骤
1
第一步 cmd进入到你的项目目录,并且输入命令cnpm install vuex --save注:自动安装到你项目中
2
第二步 在你的src新建一个store.js文件,并引入vueximport Vue from 'vue';//这里为固定格式照抄import Vuex from 'vuex';//这里为固定格式照抄Vue.use(Vuex);//此为引用Vuex
3
第三步 设置状态常量假设const state={ num:0}注:这里面你可以设置多个值
4
第四步 你考虑这状态常量能不能被你的a.vue组件或者b.vue组件引用,所以你必须再加一行代码export default new Vuex.Store({ state })
5
第五步你可以建立一个新的模板例如a.vue代码如下 {{$store.state.num}} 注:这里你要特别注意p标签写法,这为固定格式你可以观察到为0{{msg}}
6
第六步 我们如果想加入一些方法,我们可以在store.js加入一个 mutationsconst mutations={ jia(state){ state.count++;//这就代表上面num加加 },jian(state){ state.count--;//同上 }}
7 注:此为固定写法,你只需要把commit里面复制对应的方法名即可,当你点击加,你会观察到p值开始越变越大,点击减则相反
第七步在你组件引入方法即可
注意事项
1
这里你可以做一个实验,就是再建多个组件例如c.vue.d.vue等等,写入相同代码测试
2
观察是不是同样结果,这样你就理解公共数据仓库的概念