全站最详细的Vuex教程

什么是Vuex？

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

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

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

 npm install vuex --save

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

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

 import Vue from 'vue'; import Vuex from 'vuex';

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

 import Vue from 'vue'; import Vuex from 'vuex';

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

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

 import storeConfig from './vuex/store'

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

 new Vue({  el: '#app',  router,  store,//使用store  template: '<App/>',  components: { App } })

初出茅庐 来个Demo

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

 const state = {  count:1 }

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

 export default new Vuex.Store({  state });

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

 <template>  <div>   <h2>{{msg}}</h2>   <hr/>   <h3>{{$store.state.count}}</h3>  </div> </template> <script>  import store from '@/vuex/store'  export default{   data(){    return{     msg:'Hello Vuex',    }   },   store  } </script>

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

const mutations={  add(state){   state.count+=1;  },  reduce(state){   state.count-=1;  } }

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

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

 <div>  <button @click="$store.commit('add')">+</button>  <button @click="$store.commit('reduce')">-</button> </div>

这样进行预览就可以实现对vuex中的count进行加减了。