vuex的结构及核心属性

vuex

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

vuex的核心属性

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

vuex原理图

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的名字(){

        }
    }
})

2. 在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){

        }
    }
})

2. 提交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'
    })
}