关于Vuex内部方法使用，我是这样理解的

整天想死的鱼
539 阅读4分钟

1. Vuex的配置

1.1 下载vuex

将vuex安装在生产环境依赖中

$ npm install vuex --save
1.2 配置vuex
1.2.1 实例化Store

vuex是vue中store,最先是有reate提出来的 ,就是单项数据流

import Vue from 'vue'
import Vuex from 'vuex'

// Vue通过use使用Vuex插件
Vue.use(Vuex)

// 示例化Vuex.Store
let store = new Vuex.Store({
    state:{
        count: 0
    }
})

// 导出store
export default store
1.2.2 通过vue实例配置store

说明:

  1. 通过vue示例中使用store选项
  2. 是为了将store对象挂Vue的原型$store上
  3. 这样所有的组件内部就可以使用this.$store来操作store
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

2. 使用State

2.1 单一状态树

所谓的单一状态树,用一个对象包含应用中全部的状态, 这个对象作为唯一数据源而存在.

也就是意味着每个应用只包含一个store实例,

2.2 使用State中的数据

在组件中使用state中的数据

<template>
<div class="home">
    <div class="count">数字: {{ count }}</div>
    <button @click="increment">++</button>
    <button @click="decrement">--</button>
    </div>
</template>

<script>
    export default {
        name: 'Home',
        data(){
            return {
            }
        },
        methods:{
            increment(){
                // 直接操作State中的数据
                this.$store.state.count++
            },
            decrement(){
                // 直接操作State中的数据
                this.$store.state.count--

            }
        }
    }
</script>

<style >
    .count{
        font-size:30px;
        padding:20px;
    }
</style>

示例说明:

  1. 虽然我们可以直接在组件中修改Vuex中的状态.但是不推荐使用
  2. 因为直接修改状态,不会被devtool检测到,不利于代码的维护和调整

那么我们应该如何修改状态的数据呢, 我们mutation中在讲

3. Getter 的使用

3.1 关于Getter的了解
  1. 有的是有我们对于从store里的state中派生一些状态数来, 例如对于数据的过滤
  2. 如果我们在获取数据以后在进行过滤处理,那么同样的逻辑可能需要在不同的地方使用
  3. 在Vue我们采用的方式是定义计算属性处理
  4. Vuex提供了一个getter(可以认为是store中的计算属性),根据依赖状态计算值后返回并缓存起来
  5. 只有当getter依赖的状态发生改变时才会被重新计算
3.2 示例代码
3.2.1 定义getter
let store = new Vuex.Store({
    state:{
        fruits:[
            {id:1,text:"苹果",price:20},
            {id:2,text:"梨子",price:15},
            {id:3,text:"香蕉",price:22},
            {id:4,text:"菠萝",price:26}
        ]
    },
    getters:{
        filterFruits(state){

            return state.fruits.filter(fruit => fruit.price > 19)
        }
    }

})
3.2.2 使用getter
<ul>
    <!-- 使用getter,即vuex中的计算属性 -->
    {{$store.getters.filterFruits}}
</ul>
3.3 Getter参数
3.3.1 Getter第一个参数

Getter第一个参数为状态state, 用于收获Getter的依赖状态

let store = new Vuex.Store({
    state:{
        fruits:[
            {id:1,text:"苹果",price:20},
            {id:2,text:"梨子",price:15},
            {id:3,text:"香蕉",price:22},
            {id:4,text:"菠萝",price:26}
        ]
    },
    getters:{
        filterFruits(state){
            console.log(state);
            /*
             state值为
             {
                fruits:[
                    {id:1,text:"苹果",price:20},
                    {id:2,text:"梨子",price:15},
                    {id:3,text:"香蕉",price:22},
                    {id:4,text:"菠萝",price:26}
                ]
            },
            */

            return state.fruits.filter(fruit => fruit.price > 19)
        }
    },
})
3.3.2 Getter的第二个参数

Getter的第二个参数就是选项Getters, 作用是用来获取其他Getter函数

let store = new Vuex.Store({
    state:{
        fruits:[
            {id:1,text:"苹果",price:20},
            {id:2,text:"梨子",price:15},
            {id:3,text:"香蕉",price:22},
            {id:4,text:"菠萝",price:26}
        ]
    },
    getters:{
        filterFruits(state,getters){
            console.log(state);
            console.log(getters);
            /*
            {
                filterFruits: (...)
                get filterFruits: ƒ ()
                __proto__: Object

            }
          */

            return state.fruits.filter(fruit => fruit.price > 19)
        }
    },

})

作用:

可以在已经过滤后的状态基础上在此过滤,

3.4 通过方法访问

说明:

  1. 通常对于getter的使用方法,都是返回处理完毕后的数据
  2. 但是有的时候我们需要处理数据的条件是外部传递过来的,例如上个示例中过滤价格
  3. 这个的话getter可以返回一个函数, 这个函数用来接收外部传递的参数

示例代码:

let store = new Vuex.Store({
    state:{
        fruits:[
            {id:1,text:"苹果",price:20},
            {id:2,text:"梨子",price:15},
            {id:3,text:"香蕉",price:22},
            {id:4,text:"菠萝",price:26}
        ]
    },
    getters:{
        filterFruits(state,getters){

            // getter返回的不是确定的值而是一个函数
            // 那么此时在通过$store.getters.filterFruits获取到的就是一个函数
            // 既然是函数就可以当成方法使用, 传递参数
            // 例如 $store.getters.filterFruits(20)
            return (price) => {
                return state.fruits.filter(fruit => fruit.price > price)
            }
        }
    },

})

4. Action的使用

4.1 Action说明:
  1. Action类似于mutation,
  2. 不同之处在于Action提交的是mutation,而不是直接更改状态
  3. Action可以包含任意的异步操作
4.2 定义与使用Action
4.2.1 定义Action
let store = new Vuex.Store({
    state:{
        count:0
    },

    // 定义mutations
    mutations:{
        increment(state, payload){
            // mutation负责同步修改状态
            state.count++

        }
    },
    // 定义actions
    actions:{
        asyncIncrement(context){
            // action 异步触发mutation函数
            setTimeout(function(){
                context.commit({
                    type:"increment"
                })
            },1000)
        }
    }
})
4.2.2 分发Action

Action通过store.dispatch方法触发

export default {
    // ...
    methods:{
        increment(){
            // 在组件中通过dispatch触发 action函数
            this.$store.dispatch("asyncIncrement")

        }
    }
}

5 Action函数参数

Action函数 与mutation函数一样接受两个参数,

  1. Action第一个参数是上下文对象context,可以通过context直接过去状态state, getter以及触发方法commit
  2. Action第二个参数是PayLoad, 和mutation一样,Action也支持载荷
5.1 上下文对象

Action的第一个参数是上下文对象, 但是注意上下文对象虽然可以获取到状态或触发方法

但是上下文对象context并不是store对象

示例代码:

let store = new Vuex.Store({
    // ...
    actions:{
        asyncIncrement(context){
            console.log(context);
            /*
                context打印结果
                {
                    commit: ƒ boundCommit(type, payload, options)
                    dispatch: ƒ boundDispatch(type, payload)
                    getters: {}
                    rootGetters: {}
                    rootState: {__ob__: Observer}
                    state: {__ob__: Observer}
                }
             */

            // this是store对象
            console.log(this == context);  // false  

            // 异步通过上下文对象调用commit触发mutation
            setTimeout(function(){
                context.commit({
                    type:"increment"
                })
            },1000)

        }
    }
})
5.2 载荷Payload

Action与mution函数一样支持载荷

一次Action也可以如下调用

export default {
    // ...
    methods:{
        increment(){
            // 传递载荷参数
            this.$store.dispatch("asyncIncrement",{
                num: 10
            })

            // 或者如下调用
            this.$store.dispatch({
                type: "asyncIncrement",
                num: 10
            })

        }
    }
}

6 Mutations使用

6.1关于Mutations使用说明:
  1. 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
  2. mutations非常类似于事件,都有一个字符串的事件类型type和一个回调函数handler
  3. 这个回调函数就是修改状态的地方,
  4. store对象提供了一个commit方法用来触发mutations中的事件, 有点类似于$emit
6.2 定义与使用mutation
6.2.1 定义mutations
let store = new Vuex.Store({
    state:{
        count: 0
    },

    // 定义mutations
    mutations:{
        increment(){
            // console.log(this); //this 是store对象
            this.state.count++   // 修改状态中的数据
        }
    }
})
6.2.2 使用mutations函数修改数据
// 组件中
export default {
    // ...
    methods:{
        increment(){
            // 在组件中通过commit触发mutations中的函数
            this.$store.commit("increment")

        },
    }
}

7 关于mutations函数的参数

7.1 mutations参数说明:
  1. mutations函数只接受两个参数
  2. mutations函数可以接受两个参数,第一个参数就是state状态,
  3. 第二个参数是在通过commit触发mutations函数时传递的载荷(Payload,其实就是自定义传参)
7.2 mutations函数的第一个参数

说明:

  1. 上一个示例中我们是采用了this.state.count++的方式修改数据的
  2. 而mutations函数接受的第一个参数就是state状态对象,因为我们可以直接通过state修改状态

示例代码:

let store = new Vuex.Store({
    state:{
        count: 0
    },

    // 定义mutations
    mutations:{
        increment(state){
            // mutations函数的第一个参数就是state对象
            // console.log(state);

            state.count++
        }
    }
})
7.3 mutations的第二个参数

官网关于第二个参数的说法叫做提交载荷(Payload)

也就是说我们在组件中使用commit触发mutations函数是,还可以传入额外的参数

mutations

let store = new Vuex.Store({
  state:{
    count: 0
  },

  // 定义mutations
  mutations:{
    increment(state, num){
        // 通过第二个参数指定state状态修改
      state.count += num
    }
  }
})

组件触发

export default {

    // ...
    methods:{
        increment(){
            // 触发mutations函数是,指定额外的参数
            this.$store.commit("increment",2)

        },

    }

}

大多数情况下,载荷也就是第二个参数应该是一个对象,

原因在于对象可以传递多个数据,如果传递普通类型的值只能传递一个

export default {

    // ...
    methods:{
        increment(){
            // 触发mutations函数是,指定额外的参数
            this.$store.commit("increment",{
                num: 2
            })

        },

    }

}

8. 关于Mutations的风格

提交的另外一种风格:直接使用包含 type 属性的对象：

示例代码如下

export default {

    // ...
    methods:{
        increment(){
            // 触发mutations函数是,指定额外的参数
            this.$store.commit({
                type:"increment",
                num: 2
            })

        },

    }

}

此时Mutations函数不用做任何改变

let store = new Vuex.Store({
    state:{
        count: 0
    },

    // 定义mutations
    mutations:{
        increment(state, payload){
            console.log(payload);
            /*
            {
                type:"increment",
                num: 2
            }
            */
            state.count += payload.num
        }
    }
})

会自动触发payload中type属性对应的mutations函数, commit参数对象整体就是Payload

9. Mutation需要遵循Vue的响应规则

既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新.

因此Vuex中的mutation也需要Vue的响应规则

9.1 触发响应的注意事项
  1. 最好提前在你的 store 中初始化好所有所需属性。
  2. 使用 Vue.set(obj, 'newProp', 123)方法新增对象的属性
  3. 使用新对象替换老对象的方式触发响应
9.2 示例代码

利用扩展运算来创建新对象替换老对象

state.obj = { ...state.obj, newProp: 123 }

10. Mutation必须是一个同步函数

10.1 同步函数说明
  1. 一条重要的原则就是要记住 mutation 必须是同步函数
  2. 如果mutation是一个异步函数, 异步修改状态,那么devtools将不能跟踪到数据的变化
  3. 因为devtools 都需要捕捉到前一状态和后一状态的快照
  4. 如果是异步函数将没发捕捉到快照信息
10.2 示例代码
let store = new Vuex.Store({
  state:{
    count: 0
  },

  // 定义mutations
  mutations:{
    increment(state, payload){

        //mutation中异步修改状态
      setTimeout(() => {
        state.count += payload.num
      },2000)

      console.log(this);

})

此时devtools中没发监听状态state的变化

11.Module 模块

如果你项目非常大,如果只有一个模块来维护数据,那么这个模块会非常大, 对于可维护性来说就不是特别高,所以vuex给我们提供了模块的功能 我们可以通过modules来将vuex处理为多个模块

11.1 定义Store中的模块

说明:

  1. 通过store中的modules选项定义模块
  2. 每个模块都有自己的state,getter,mutation,action

示例代码:

let moduleFruits = {
    state:{
        fruits:[{
            name:"苹果",
            price: 22
        },{
            name:"梨子",
            price: 25
        },{
            name:"西瓜",
            price: 16
        },{
            name:"香蕉",
            price: 18
        }]
    },
    getters:{
        filterFruits(state){
            return state.fruits.filter(fruit => fruit.price > 20)
        }
    },
    mutations:{
        addFruit(state,payload){
            console.log(arguments);
            state.fruits.push({
                name:payload.name,
                price: payload.price
            })

        }
    },
    actions:{
        asyncAdd(context,payload){
            console.log(arguments);
            context.commit("addFruit",payload)

        }
    }
}

let store = new Vuex.Store({
    state:{
        count:0,
        user:{
            name:"张三",
            age:20
        },

    },
    getters:{
        //...
    },
    mutations:{
        //...
    },
    actions:{
        //...
    },
    modules:{
        goods:moduleFruits
    }
})

11.2. 组件中获取模块中的数据

11.2.1 获取模块中的state状态
$store.state.goods.fruits

说明:

  1. $store就是Store仓库
  2. state获取state数据
  3. goods为modules中的模块名称
  4. fruits为模块goods中state数据
11.2.2 获取getter计算属性
$store.getters.filterFruits

注意:

  1. store中getters的计算属性不能和模块中的getters计算属性重名
  2. 如果重名,vuex用用store中的getter计算属性替换模块中的计算属性

11.3 组件操作store中的mutation和action

11.3.4 commit方法

触发mutation中的方法和触发store中的方法一直

this.$store.commit({
    type:"increment",
    name:"菠萝",
    price: 22
})
11.3.5 store中的mutation方法和store中的重名

说明:

如果mutation方法重名,会先执行store中的,在执行自己

也就是说所有同名的mutation函数都会执行

只不过每一个mutation函数修改的状态不同

11.3.6 dispatch方法

组件中使用dispath方法触发action方法,

this.$store.dispath({
    type:"asyncIncrement",
    name:"菠萝",
    price: 22
})

总结

说了vuex的内部方法的使用

  1. state
  2. geters
  3. action
  4. mutation
  5. modules

下一次说说vuex的四大金刚 -- 辅助函数

avatar
文章
阅读
粉丝