vuex

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(可以理解为对数据进行统一的管理)

vuex的核心属性

一共五个核心属性: state, mutations, getters, actions, modules

vuex的结构

const store = new Vuex.Store({
    state:{
        //  通过管理状态(数据)
    },
    mutations:{
        //  进行同步操作;修改state的唯一入口
    },
    getters:{
        //   Vuex的计算属性,对state的状态派生出新的状态
    },
    actions:{
        //  进行异步操作
    },
    modules:{
        //  Vuex的模块 : 每个模块都有五个属性 state, mutations, getters, actions, modules
    }
})

vuex 的实例对象

vuex 的实例对象 store , 可以通过store访问 vuex中的state , 提交mutations 等

const store = new Vuex.Store({...})
//  注册到Vue实例中
const app =  new Vue({
    ...,
    store
})

vuex 的state

访问state中的状态:

  1. 在模板中: $store.state.key
  2. 在组件中: this.$store.state.key
  3. 通过 辅助函数 mapState() 访问 : 可以使用 mapState 辅助函数帮助我们生成计算属性
//  对象形式传递
 computed: Vuex.mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

//  数组形式传递
computed:{
    // 当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
    ...Vuex.mapState(['count'])
}

vuex 的mutations

mutation的基本用法

如果要修改state中的状态, mutation 是唯一的入口; 需要提交mutations 修改state ; 通过 store.commit() 提交mutation

  1. vuex中定义 mutation
const store = new Vuex.Store({
    state:{},
    mutations:{
        自定义的mutation的名字(){

        }
    }
})

  1. 在vue实例中触发事件,提交mutation
methods:{
    add(){
        this.$store.commit('自定义的提交的mutation名字')
    }
}

提交载荷 payload

提交载荷 就是传递参数; 建议参数使用对象的形式进行传递; 为了便于维护和扩展;载荷作为commit()的第二个参数存在

methods:{
    add(){
        this.$store.commit('自定义的提交的mutation名字', payload)
    }
}

以对象的形式提交mutation

需要在对象中定义一个type属性,用来指定mutation ; 整个对象作为载荷被一起提交

  1. 定义mutation
const store = new Vuex.Store({
    state:{},
    mutations:{
        //  mutation 默认接受的第一个参数是state(就是vuex的state), 第二个参数就是提交的载荷(传递的数据)
        自定义的mutation的名字(state, val){

        }
    }
})

  1. 提交mutation
methods:{
    add(){
        this.$store.commit({
            type:'自定义的mutation名字',
            ... // 传递的数据(载荷payload)
        })
    }
}

mapMutations 辅助函数

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations() 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)
...Vuex.mapMutations(['定义的mutation名字1', ...])

methods:{
    //  如果是数组形式: 则把mutation的名字自动映射出同名的方法名
    ...Vuex.mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷:
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),

    // 如果是对象形式: 重新定义方法名和 mutation 的映射机制
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })

    //  辅助函数 提交载荷 :通过一个新的方法 调用 映射出来的方法并且传入参数
    newMethods(){
        //  参数 payload 自动映射为 this.$store.commit('incrementBy', amount)
        this.incrementBy(payload)
    }
}

vuex 的getters

getters 相当于vuex的计算属性,用来针对state中的状态派生出新的状态(通过getters对象state中的数据进行处理得到新的数据)

访问getters

  1. 通过属性访问:
    Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值:
    • 模板中: $store.getters.key
    • 组件中: this.$store.getters.key
  2. 通过方法访问:
    你也可以通过让 getter 返回一个函数(通过闭包的形式),来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
getters:{
    自定义getters名字(){
        return function(params){
            // 业务逻辑处理
            //  处理完成后 把结果放回
            return result
        }
    }
}

getters的参数

getters:{
    //  getters默认接受第一个参数是state , 第二个参数是其他的getters (它是一个对象, 通过getters.key访问其他的getters)
    自定义getters名字1(state, getters){
       // 业务逻辑处理
       return result
    },
    自定义getters名字2(state, getters){
       // 业务逻辑处理
       return result
    }
}

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性(vue实例对象的计算属性):

computed:{
    //  数组形式: 自动映射getters同名的计算属性 (在计算属性名字没有被占用的情况下可以使用)
    ...Vuex.mapGetters(['getters名字1', ...]),

    //  对象形式: 重命名计算属性名 和getters名字的映射机制
    ...Vuex.mapGetters({
        // 把 `this.newComputedName` 映射为 `this.$store.getters.getters名字1`
        newComputedName:'getters名字1'
    })
}
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页