什么是Vuex？

vuex是一個專門為vue.js設(shè)計的集中式狀態(tài)管理架構(gòu)。狀態(tài)？我把它理解為在data中的屬性需要共享給其他vue組件使用的部分，就叫做狀態(tài)。簡單的說就是data中需要共用的屬性。

引入Vuex（前提是已經(jīng)用Vue腳手架工具構(gòu)建好項目）

1、利用npm包管理工具，進行安裝 vuex。在控制命令行中輸入下邊的命令就可以了。

 npm install vuex --save

要注意的是這里一定要加上 –save，因為你這個包我們在生產(chǎn)環(huán)境中是要使用的。

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、現(xiàn)在我們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的數(shù)值的方法，必須寫在mutations里就可以了。

5、在count.vue模板中加入兩個按鈕，并調(diào)用mutations中的方法。

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

這樣進行預(yù)覽就可以實現(xiàn)對vuex中的count進行加減了。