Vuex 使用及简单实例(计数器)
前一段时间因为需要使用vue,特地去学习了一下。但是时间匆忙vuex没有接触到,今天闲暇时看了解了一下vuex,并做了一个小demo,用于记录vuex的简单使用过程。 什么是Vuex?vuex是专门为vue.js应用程序开发的一种状态管理模式,当多个视图依赖于同一个状态或是多个视图均可更改某个状态时,将共享状态提取出来,全局管理。 引入Vuex(前提是已经用Vue脚手架工具构建好项目)1、利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了。 要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的。 2、新建一个store文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。 3、使用我们vuex,引入之后用Vue.use进行引用。 通过这三步的操作,vuex就算引用成功了,接下来我们就可以尽情的玩耍了。 4、在main.js 中引入新建的vuex文件 5、再然后,在实例化 Vue对象时加入 store 对象 : 下面是一个计数器的例子在src目录下创建一个store文件夹。 src/store.js Vue.use(Vuex)
const store = new Vuex.Store({ export default store state就是我们的需要的状态,状态的改变只能通过提交mutations,例如: 带有载荷的提交方式: 当然了,载荷也可以是一个对象,这样可以提交多个参数。 在main.js中引入store.js在组件中使用在组建可以通过 更改状态只能以提交mutation的方式。
{{$store.state.count}}
{{$store.state.show}}到这里这个demo就结束了, 感觉整个个过程就是一个传输数据的过程,有点类似全局变量,但是vuex是响应式的。 这里当然并没有完全发挥出全部的vuex, vuex还在学习中,写这篇文章主要是记录其简单的使用过程。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |