您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

vuex实现不同组件的数据共享 数据持久化_转

发布时间：2023-04-12 22:08:55编辑：雪饮阅读（）

本篇主要是基于上篇了解下
1. 利用vuex中mutations中的方法进行给state中的属性进行赋值时候的mutations中的方法的两个形参的作用。
2. 以及vuex中getter，这里的getter不像是java那样单纯的要每次使用的时候去调用，而是一次性调用，getter中定义的方法中所依赖的数据若变动就会自动触发了对应getter产生到新的数据立马呈现在页面上，有点像是引用类型那种感觉了。
3. 以及actions中定义的方法的间接调用mutations与dispatch的使用。
具体实例如：
store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//给全局state对象增加一个list属性用来存储数据列表的数据
var state={count:1,list:[]};
var mutations={
    incCount(){
        state.count++;
    },
    /*
    当要通过mutations通过组件传值过来赋值给state的子属性的值时候
    组件那边调用方式如
    this.$store.commit('addList',[1,2,3,4,5]);
    那么mutations中的方法是应该一般的有两个参数
    则参数1在我看来一般的是没有用处的，参数2才是具体的数据
    像是下面addList中的第一个形参state虽然和方法体里面的state一样
    但就环境变量作用域来说，我认为是不同的，形参一般只具有临时的作用
    我的理解是下面方法体里面的state实际上是指这里的全局的state吧
    或者换句话理解就是说这个形参state里面应该是没有list的，而全局
    state中是有list的
 
    所以下面addList2也是可以用的方法，
    addList2中params1只是起了一个占位作用。。。
    那么addList3就不对了。。
    */
    addList(state,data){
        state.list=data;
    },
    addList2(params1,data){
        state.list=data;
    },
    addList3(data){
        state.list=data;
    }
};
//定义getter方法集
var getters={
    //getter的方法一般的回调上面的形参可要可不要，根据这里的代码上下文也可以很容易理解
    computedCount:(state)=>{
        return state.count*2;
    },
    computedCount2:()=>{
        return state.count*2;
    }
};
/*
actions中可以定义一些间接执行mutations中的方法
有什么区别呢？好像说是actions中可以执行一些异步的方法。。。
感觉传统的也可以吧，比如ajax都是可以的
*/
var actions={
    /*
    像是组件上直接调用时候如
    this.$store.commit('incCount');
    所以这里我个人理解context就代指this.$store
    所以这里这个形参context多少还是必要的，
    或许还有其它变通方法，但是感觉应该反而绕了弯路
    */
    incmutationsCount(context){
        context.commit('incCount');
    },
}
const store=new Vuex.Store({state,mutations,getters,actions});
 
export default store;
vuex_practice_1.vue如：
<template>
    <div>
        <div>这里是vuex1</div>
        <div>store.state.count的值：{{this.$store.state.count}}</div>
 
        <div>getter调用computedCount：{{this.$store.getters.computedCount}}</div>
        <div>getter调用computedCount2：{{this.$store.getters.computedCount2}}</div>
        <hr>
        <button @click="changessc()">store.state.count的值增加1(通过dispatch加)</button>
        <hr>
        <button @click="addList()">通过store中的mutations中的方法addList赋值数据列表</button>
        <button @click="addList2()">通过store中的mutations中的方法addList2赋值数据列表</button>
        <button @click="addList3()">通过store中的mutations中的方法addList3赋值数据列表</button>
        <hr>
        <ul>
          <li v-for="item in this.$store.state.list">{{item}}</li>
        </ul>
    </div>
</template>
 
<script>
    import store from '../store.js';
    export default {    
      data () {
        return {}
      },
      methods:{
        changessc(){
            //dispatch派遣名为actions里面定义的方法名
            this.$store.dispatch('incmutationsCount');
        },
        addList(){
            this.$store.commit('addList',[1,2,3,4,5]);
        },
        addList2(){
            this.$store.commit('addList2',[6,7,8,9,10]);
        },
        addList3(){
            this.$store.commit('addList3',[10,11,12,13,14,15]);
        }
      },
      store
    }
</script>