Vue.js框架--Vuex实现不同组件计数器数据共享（二十七）

主要操作技能：

 官网：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）同样，首页数据也发生相应的变化，达到了数据共享！