Vuex基础

川长思鸟来 2022-01-20 07:25 320阅读 0赞

## Vuex是什么? ##

*  一个专为Vue.js应用程序开发的状态管理模式
 *  项目复杂使用vuex可以简化逻辑,但是项目简单使用时则会增加逻辑

**总结上图**:

*  Actions发送请求,响应成功后把数据提交给Mutations
 *  Mutations接受到数据后,去更新State中的数据
 *  State管理的数据是响应式的,当数据改变时渲染视图

## Vuex使用步骤: ##

*  npm i vuex
 *  import vuex from 'vuex'
 *  Vue.use(vuex)
 *  const store = new Vuex.Store(\{\})
 *  在根组件配置store选项指向store实例对象

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(vuex)
    const store = new Vuex.Store({
    
    })
    new Vue({
      el: '#app',
      // 挂载后,所有的组件都会有一个$store
      store 
    })
    复制代码

## state ##

*  作用申明数据，提供给其他组件使用，在组件中computed(计算属性)去使用

// 实例化store对象申明数据
    new Vuex.Store({
        // state 管理数据
        state: {
            count: 100
        }
    })
    // 在组件中使用:
    <template>
        
        <p>{
        {
        $store.state.count}}</p>
        
        <p>{
        {count}}</p>
    </template>
    <script>
        export default {
            computed: {
                count () {
                    return $store.state.count
                }
            }
        }
    </script>
    复制代码

## mapState ##

*  当一个组件需要获取多个状态时,将这些状态都声明为计算属性会重复和冗余,这是我们可以使用`mapState`辅助函数帮助我们生成计算属性
 *  把state中的数据映射成计算属性
 *  对象写法:

import {mapState} from 'vuex'
    export default {
        data () {
            return {
                msg: 'XXX'
            }
        }
        computed: mapState({
            // 箭头函数
            count: state => state.count,
            // 传字符串参数'count' 等同于'state => state.count'
            count: 'count',
            // 在使用state中的数据时,如果依赖组件内部的数据,必须使用常规函数
            count(state) {
                return state.count + this.msg
            }
        })
    }
    复制代码

*  数组写法

computed: mapState(['count'])   --->相当于{count: function(state){
        return state.count}}
    复制代码

*  日常开发中使用展开符的写法:(可以写外部的映射属性,也可以写内部的计算属性)

computed: {
        ...mapState(['count'])
    }
    复制代码

## mutations ##

*  更改Vuex的store中的状态的唯一方法是提交mutation.Vuex中的mutation类似于事件.

// 实例化store对象申明: mutation必须同步执行
    new Vuex.Store({
        // state    管理数据
        state: {
            count: 100
        },
        // mutations 修改数据
        mutations: {
            increment(state) {
                // 变更状态
                state.count++
            }
        }
    })
    // 在组件中使用: 
    // 默认提交
    methods: {
        fn() {
            //调用mutations中的increment
            this.$store.commit('increment')
        }
    }
    // 提交传参
    mutations: {
      increment (state, payload) {
        state.count += payload.amount
      }
    }
    复制代码

this.$store.commit('increment', {
      amount: 10
    })
    复制代码

## mapMutations ##

*  vuex提供的辅助函数 在methods中映射函数的

import { mapMutations } from 'vuex'
    
    export default {
      // ...
      methods: {
      // 数组写法
        ...mapMutations([
          'increment'      // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
        ]),
      // 对象写法
        ...mapMutations({
          add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
        })
      }
    }
    复制代码

## Actions ##

*  Action类似于mutation,区别:
    
     *  Action提交给mutation,而不是直接变更状态
     *  Action可以包含任意异步操作
    
        // 在实例化store对象申明:
        const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment (state) {
            state.count++
            }
        },
        // actions 异步操作 获取后台数据
        actions: {
            getData (context) {
                setTimeout(()=>{
                    // 数据获取成功
                    context.commit('increment')
                }，1000)  
            }
        }
        }) 
        // 在组件中调用,也可以提交参数
        this.$store.dispatch('getData')
        复制代码

## mapActions ##

*  vuex提供的辅助函数 在methods中映射函数的

import { mapActions } from 'vuex'
    
    export default {
      // ...
      methods: {
        ...mapActions([
          'getData', // 将 `this.increment()` 映射为 `this.$store.dispatch('getData')`
        ]),
        ...mapActions({
          add: 'getData' // 将 `this.add()` 映射为 `this.$store.dispatch('getData')`
        })
      }
    }
    复制代码