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

- 日理万妓 2024-02-19 12:46 45阅读 0赞

**主要操作技能：**

*官网：[https://vuex.vuejs.org/zh/][https_vuex.vuejs.org_zh]*

**一、Vuex 解决不同组件数据共享，数据持久化。**

1.安装 cnpm install vuex --save  
  
2.在src下创建vuex文件夹,在创建文件store.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]  
  
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)默认数据

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]**

2)单击按钮发生，数据发生变化

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]**

3）同时，新闻页面数据也发生同等变化

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3][]**

4）单击按钮，数据发生变化到4

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4][]**

5）同样，首页数据也发生相应的变化，达到了数据共享！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 5][]

[https_vuex.vuejs.org_zh]: https://vuex.vuejs.org/zh/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/da543181c9f2465491c178f9d6657479.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1d2b7a9c493f4f418783c5a2156e2d51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/24637da0be5e450f864bb9ac489577fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8f5fa18eb2334c979e9fed27ffdbbf68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6c42bd50b89747938b44f56c2932edb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7a9ca32a752c4161b7a9526bfbd81278.png