操作方法
第一步 cmd进入到你的项目目录,并且输入命令 cnpm install vuex --save 注:自动安装到你项目中
第二步 在你的src新建一个store.js文件,并引入vuex import Vue from 'vue';//这里为固定格式照抄 import Vuex from 'vuex';//这里为固定格式照抄 Vue.use(Vuex);//此为引用Vuex
第三步 设置状态常量 假设 const state={ num:0 } 注:这里面你可以设置多个值
第四步 你考虑这状态常量能不能被你的a.vue组件或者b.vue组件引用,所以你必须再加一行代码 export default new Vuex.Store({ state })
第五步你可以建立一个新的模板例如a.vue 代码如下 <template> <div> <h2>{{msg}}</h2> <hr/> <p>{{$store.state.num}}</p> </div> </template> <script> import store from '@/store' export default{ data(){ return{ msg:'足球比赛', } }, store } </script> 注:这里你要特别注意p标签写法,这为固定格式 你可以观察到为0
第六步 我们如果想加入一些方法,我们可以在store.js加入一个 mutations const mutations={ jia(state){ state.count++;//这就代表上面num加加 }, jian(state){ state.count--;//同上 } }
第七步在你组件引入方法即可 <div> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </div> 注:此为固定写法,你只需要把commit里面复制对应的方法名即可, 当你点击加,你会观察到p值开始越变越大,点击减则相反