全站最详细的Vuex教程

Vue 前端之家
前端之家收集整理的这篇文章主要介绍了全站最详细的Vuex教程，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

什么是Vuex？

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

引入Vuex（前提是已经用Vue脚手架工具构建好项目）

1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。

@H_502_11@

要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。

2、新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

@H_502_11@

3、使用我们vuex，引入之后用Vue.use进行引用。

@H_502_11@

通过这三步的操作，vuex就算引用成功了，接下来我们就可以尽情的玩耍了。

4、在main.js 中引入新建的vuex文件

@H_502_11@

5、再然后,在实例化 Vue对象时加入 store 对象 :

',components: { App } }) @H_502_11@

初出茅庐 来个Demo

1、现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件。

@H_502_11@

2、用export default 封装代码，让外部可以引用。

@H_502_11@

3、新建一个vue的模板，位置在components文件夹下，名字叫count.vue。在模板中我们引入我们刚建的store.js文件，并在模板中用{{$store.state.count}}输出count 的值。

{{msg}}

{{$store.state.count}}

@H_502_11@ @H_502_11@

4、在store.js文件中加入两个改变state的方法。

@H_502_11@

这里的mutations是固定的写法，意思是改变的，所以你先不用着急，只知道我们要改变state的数值的方法，必须写在mutations里就可以了。

5、在count.vue模板中加入两个按钮，并调用mutations中的方法。