www4066comvuex

作者: 医学科学  发布:2019-10-01

vuex-集中式管理数据

vuex官网:

  • Action 类似于 mutation,不同在于:
    1.Action 提交的是 mutation,而不是直接变更状态。
    2.Action 可以包含任意异步操作。

  • mutation是同步的,当需要异步操作的时候,就需要dispatch一个action。

  • Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

     actions: {
      increment (context) {
       context.commit('increment')
      }
     }
    

    实践中,我们会经常用到 ES2015 的 参数解构 来简化代码(特别是我们需要调用 commit 很多次的时候):
    等价于上面的代码。

     actions: {
      increment ({ commit }) {
       commit('increment')
      }
     }
    
  • 问:页面触发action进行请求,发现vuex state中的状态确实发生了变化,但是页面需要刷新才能渲染列表?
    答:我想到的解决方法:1.判断state的对应状态有值后,进行相应操作;2.用computed或watch,如果值变化,进行相应操作。

  • namespaced: true 配置的作用:
    通过 [文件名]/[value] 的方式访问值,而不用挂载到全局namespace。

    export const myModule = {
    // This makes your getters, mutations, and actions accessed by, eg: 'myModule/myModularizedNumber' instead of mounting getters, 
    // mutations, and actions to the root namespace.
    namespaced: true,
    state: {
        myModularizedNumber: 0
    },
    getters: {
        myModularizedNumber: state => state.myModularizedNumber
    },
    mutations: {
        setModularizedNumber(state, newNumber) {
            state.myModularizedNumber = newNumber
        }
    }
    }
    
  • 修改store里别的module中值的方法:
    1.在要修改值的module中,写一个mutation;
    2.在vue组件中触发的话,语句如下:

    this.$store.commit('[module_name]/[mutation]') 
    
  • store中的值,在mutations中才能修改。

  • 从store中取时间,并做倒计时显示在页面上:

一、安装

cnpm install vuex --save-dev
  1. data中定义要在页面上显示的数据:time

    data () {
        return {
            time: ''
        }
    },
    
  2. computed中定义数据的处理:

    computed: {
        modifyTime () {
            if (this.user !== null) {
                return this.countDown(this.user.platform.modifyTime)
            }
            return ''
        }
    
  3. methods中定义处理数据的函数:

    methods: {
        countDown (time) {
    
        },
    

二、vuex数据流示意图

www4066com 1

  • state作为store的唯一数据源而存在,在组件里可以使用this.$store.state来获取,但是这个数据是只读的,无法直接通过给this.$store.state赋值来达到赋值的效果。这时就轮到mutation出场了。
    mutation是唯一能更改store中的状态(state)的方法,这个相当于事件,每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。

  • 在 Vue.js devtools 中,mutations有type、payload 两个值。

  • vuex管理的是组件的状态,用getters可以让一个组件获取多个store中的states。

  • 访问vuex中的数据和方法:
    this.$store.state.数据名
    this.$store.getters.方法名

  • mapGetters 辅助函数(...mapGetters)仅仅是将 store 中的 getters 映射到局部计算属性,其实也就是从 getters 中获取对应的属性,跟解构类似。

  • 如果所有计算属性的名称都与 state 一致,可以在 mapState 中以数组的方式进行映射。如果 Vue 中已经存在计算属性,可以通过 ES6 的展开操作符 (...) 进行组合。

  • 获取store中数据的2种方式(因为store的数据有可能还不存在,所以需要判断下):
    1.在computed中获取
    2.在watch中获取

  • 获取vuex组件store中值的2种方式:
    1.组件computed中获取store中的值(推荐)

    computed: {
        show: function () {
            return this.user !== null
        },
        form: function () {
            if (this.show === true) {
                let obj = _.cloneDeep(this.user)   // 深拷贝一份state数据
                // 对obj的数据进行处理,便于显示
                return obj
            }
            return null
        },
        ...mapState({
            user: state => state.user.auth
        })
    },
    

    2.组件template中获取store中的值:

    {{ $store.state.user.auth.nick | emptyFilter }}
    :src=" $store.state.user.auth.icon "
    
  • vuex中的modules:
    可以在一个module下,再新建一个module

  • methods中自己定义的函数名,不要和methods中...mapActions({})中的函数同名;
    如果同名的话,vue不知道该执行哪个。

  • 使用如下语句引入modules时,必须在此文件夹的index.js中引入各module对应的js文件。

    import * as modules from './modules'
    

本文由金沙澳门官网发布于医学科学,转载请注明出处:www4066comvuex

关键词:

上一篇:没有了
下一篇:眉笔安利第二弹,什么眉笔好用