在Vue中,组件可以分为数据和视图两个部分,数据更新时试图也会随之更新,在视图中也可以绑定一些时间用于触发methods里指定的方法,从而改变数据、更新视图等操作,但是传统的Vue只能在本组件控制其他的组件就没有办法独去或修改,而Vuex就弥补了这个缺点,可以做到跨组件共享数据,话不多说直接操作。
1、Vuex是一个插件首先需要安装Vuex(所有npm的地方都可以换成cnpm将不再叙述)
npm install vuex --save
然后在Vue项目下的src文件夹中创建store文件夹意思意思为数据库,并在store下新建index.js 如图所示:
内部代码如下:
import Vue from 'vue'; import Vuex from 'vuex';//引入Vuex插件 Vue.use(Vuex);//调用Vue.use()方法使用 export default new Vuex.Store({ //state存放所有的共享数据 state:{ count:0 }, //状态的变化 mutations:{ increment(){ this.state.count++; }, decrement(){ this.state.count--; } } });
接着需要在main.js中引入store数据源,并在Vue实例中使用,main.js的代码如下:
import Vue from 'vue' import home from './components/counter.vue' import router from './router' import store from './store/index'//引入刚才写的index.js文件 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { home }, template: '<home/>' });
main.js配置也结束了,接下来就是如何在实例当中使用了,在index.js中已经写了increment方法和decrement方法,接下来在实例中去使用,代码如下:
<template> <div class="page"> <p>{{count}}</p> <button @click="increment">+1</button> <button @click="decrement">-1</button> </div> </template> <script> export default { data() { return {} }, computed:{ count(){ return this.$store.state.count; } }, methods: { increment(){ //改变store中的状态唯一途径就是显式的提交 this.$store.commit("increment"); }, decrement(){ this.$store.commit("decrement"); } }, } </script>