vuex怎么使用

作者:国际小甜 | 创建时间: 2023-04-22
vuex其实这个概念在文档中很难准确理解,而它本身就是一个公共的数据仓库,例如你在登录页面时,你的登录状态,你在贴吧页面的登录状态与你在百科页面的登录状态实际上是一样的,这说明你需要一个公共的仓库来存储它,所以vuex基于此实践。...
vuex怎么使用

操作方法

第一步 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值开始越变越大,点击减则相反

温馨提示

这里你可以做一个实验,就是再建多个组件例如c.vue.d.vue等等,写入相同代码测试
观察是不是同样结果,这样你就理解公共数据仓库的概念
点击展开全文

更多推荐