主要操作技能：

 官網：https://vuex.vuejs.org/zh/

一、Vuex 解決不同元件資料共享，資料持久化。

    1.安裝 cnpm install vuex --save
    
    2.在src下建立vuex資料夾,在建立檔案store.js

  
    
    3.在store.js檔案中引入vuex
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    4.定義資料  state
           /*1.state在vuex中用於儲存資料*/
           var state={
                    count:1
                }
    5、定義方法  mutations     
         // mutations裡面放的是方法，方法主要用於改變state裡面的資料    
            var mutations={
            
                        incCount(){
            
                        ++state.count;
                        }
                    }
    
    6、有點類似於計算屬性 getters，改變state裡面的count的資料會觸發getter的方法，獲取新的值;(基本用不到)

    var getters={
        computedCount:(state)=>{  //state作為其第一個引數
            return state.count*3;
        }
        
    }
    7、基本也沒用  actions
        Action 類似於 mutation，不同在於：
        Action 提交的是 mutation，而不是直接變更狀態。
        Action 可以包含任意非同步操作。
     var actions={
        incMutationsCount (context) { //因此你可以呼叫context.commit提交一個mutation
          context.commit('incCount')   //執行mutations中的incCount方法
        }
      }
    
    
    8、暴露Vuex
            const store = new Vuex.Store({
                state,
                mutations，
                getters,
                actions
            })
            
         export default store;
         
          

二、組建裡面使用vuex：     
    1.在Home.vue元件中匯入
      import store from '../vuex/store.js'
      
    2.在Home.vue元件中註冊
       export default {
            data() {
                return {
                    title: '新聞元件！',
                    list: []
    
                }
            },
            store
            
    }
    
    3、獲取state裡面的資料  
         this.$store.state.資料
    
    4、觸發 mutations 改變 state裡面的資料
           this.$store.commit('incCount');
         
    5、觸發 actions裡面的方法
         this.$store.dispatch('incMutationsCount');   
    
    6、 獲取 getters裡面方法返回的的資料   {{this.$store.getters.computedCount}} 
            

編寫程式碼：

   store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/*1.state在vuex中用於儲存資料*/
var state={
	count:1
}

//2.mutations裡面放的是方法，方法主要用於改變state裡面的資料

var mutations={
	incCount(){
		++state.count;
	}
}

//3.有點類似於計算屬性，改變state裡面的count的資料會觸發getter的方法，獲取新的值;(基本用不到)
var getters={
	computedCount:(state)=>{  //state作為其第一個引數
		return state.count*3;
	}
	
}
//4.基本也沒有
//Action 類似於 mutation，不同在於：
//Action 提交的是 mutation，而不是直接變更狀態。
//Action 可以包含任意非同步操作。

 var actions={
    incMutationsCount (context) { //因此你可以呼叫context.commit提交一個mutation
      context.commit('incCount')   //執行mutations中的incCount方法
    }
  }



//例項化 Vuex.store,注意暴露
const store = new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

//匯出
export default store

  Home.vue

		<h2>{{title}}   {{this.$store.state.count}}
			-->{{this.$store.getters.computedCount}}</h2><br />
			
		<button @click="changCount">改變資料+</button><br /><br />

<script>
	//匯入
	import store from  '../vuex/store.js'

    export default {
		data() {
			return {
          }
        },
	    store, //註冊
		methods: {
           changCount(){  //incCount是mutation中的方法
//         	this.$store.commit('incCount')  //觸發state裡面的資料

//             分發 Action
              this.$store.dispatch('incMutationsCount')  //觸發action裡面的方法
           }
		}
</script>

效果：

1)預設資料

2)單擊按鈕發生，資料發生變化

3）同時，新聞頁面資料也發生同等變化

4）單擊按鈕，資料發生變化到4

5）同樣，首頁資料也發生相應的變化，達到了資料共享！