vuex的使用

117 阅读1分钟

1,新建一个工程 2,安装vuex 输入命令行:npm install vuex --save (如果安装成功,json文件里面应该会配置vuex,如图:

3,在src下面新建一个vuex文件夹,文件夹内新建一个store.js,引用vue,引入vuex,引用vuex,如图:

到了这一步就算安装完成了。

4,开始实现我们第一个小demo

a,在components下新建一个组建count.vue,将store引入到该组建中。

b,在store底下声明一个常量state,用来存储count状态

c,然后需要用export default 把这个状态state暴露出去

e,然后到count组件下面用 {{$store.state.count}} 插值方式传送出去,并在export default里面注册store,才会生效

d,最后我们需要配置一下路由 { path: '/count', name: 'count', component: count } 然后就可以输入路由地址显示出来了

5,接下来,我们需要改变state的状态,在count组件里边设置加号和减号按钮

这里我们用mutations来改变state的值,用commit提交显示出去(不要忘记在store里面暴露mutations )

最后我们看到的效果是这样子的

他们通过vuex存储同一个状态