vuex

vuex概述

组件之间数据共享的方式 父向子传值：v-bind属性绑定 子向父传值：v-on事件绑定 兄弟组件之间共享数据：EventBus $on接收数据的那个组件$emit发送数据的那个组件

vuex是实现组件全局状态数据管理的一种机制，可以方便实现组件之间的数据共享。

使用vuex统一管理状态的好处

1. 能够在vuex中集中管理共享的数据，易于开发和后期维护
2. 能够高效地实现组件之间的数据共享，提高开发效率
3. 存储在vuex中的数据都是响应式的，能够实时保存数据与页面的同步

一般情况下组件之间共享的数据采用必要存储在vuex中，私有数据存储在组件自身的data中即可。

vuex的基本使用

1. 安装vuex依赖包 npm install vuex --save
2. 导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3. 创建store对象

const store=new Vuex.Store({
    state:{ count:0 }
    //state中存放的就是全局共享数据
})

4. 将store对象挂载到vue实例中

new Vue({
    el:'#app',
    render:h=>h(app),
    router,
    //将创建的共享数据对象，挂载到vue实例中
    //所有的组件就可以直接从store中获取全局的数据了
    store

vuex核心概念

state

state提供唯一公共数据源，所有的共享数据都要统一放到store的state中进行存储。

//store数据源，提供唯一的公共数据
const store=new Vuex.Store({
    state:{ count:0 }
    //state中存放的就是全局共享数据
})

在组件中访问state中的数据：

方法一：

this.$store.state.全局数据

方法二：

这里的写法是不正确的，不能在vue文件中修改全局的数据

mutation

mutation用于变更store中的数据。

1. 只能通过mutation来变更store中的数据，不可以直接操作store中的数据。
2. 通过mutation操作数据虽然繁琐，但是可以集中健康所有数据的变化。

//定义Mutation
const store=new Vuex.store({
    state:{
        count:0
    },
    mutations:{
    //在mutation定义变更数据的函数
        add(state){
            //变更状态
            state.count++
        }
    }
})

//触发mutation
methods:{
    handle(){
        //触发mutations
        this.$store.commit('add')
    }
}

在触发mutation时传递参数：

第一个参数一定为state全局数据，第二个参数可以是外界传递的参数。

//触发mutation
const store=new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        //第一个参数一定为state，第二个参数可以外界调用时传入
        addN(state,step){
            //变更状态
            state.count += step
        }
     }
  })

//触发mutation
methods:{
    handle(){
        //触发mutations
        this.$store.commit('addN',3) //3为调用mutation函数传入的第二个参数
    }
}

在组件中触发mutations函数：

方法一：

this.$store.commit（'mutations函数'）

方法二：

1. 从vuex中按需导入mapMutations函数

import {mapMutations} from 'vuex'

2. 将导入的mapMutations函数映射为当前组件的methods方法

methods:{
    ...mapMutations(['add','addN']) //就可以在组件中把add和addN当做普通的方法进行调用
}

在mutations函数中执行异步操作是不允许的，例如settimeout.

Action

Action用于处理异步操作。

如果通过异步操作变更数据，必须通过Action,而不能使用Mutations,但是在Action中还是要通过触发Mutation的方式间接变更数据。

//定义Action
const store=new Vuex.Store({
    state：{
        count:0
    },
    mutations:{
        add(state){
            state.count++
        }
    },
    actions:{
        addAsync(context){
            //异步变更数据
            setTimeout(()=>{
                //在actions中不能直接修改state中的数据，必须通过context.commit()触发某个mutation函数才可以
                //只有在mutations中才有修改state数据的权利
                context.commit('add')
             },1000)
        }
    }
 })

//触发Action
methods:{
    handle(){
        //触发Action的第一种方式
        this.$store.dispatch('addAsync')
    }
 }

在触发action异步任务时携带参数：

//定义Action
const store=new Vuex.Store({
    state：{
        count:0
    },
    mutations:{
        addN(state,step){
            state.count+=step
        }
    },
    actions:{
        addNAsync(context,step){
            //异步变更数据
            setTimeout(()=>{
                context.commit('addN',step)
             },1000)
        }
    }
 })

//触发Action
methods:{
    handle(){
        //触发Action的第一种方式
        //触发actions时携带参数
        this.$store.dispatch('addNAsync'，5)
    }
 }

触发actions的两种方式：

方法一：

this.$store.dispatch('actions函数',step)

方法二：

1. 从vuex中按需导入mapActions函数

import {mapActions} from 'vuex'

2. 将导入的actions函数映射为methods方法

//在组件中可以将映射的actions方法当做普通的方法进行调用
methods:{
    ...mapActions(['addAsync','addNAsync'])
}

Getter

Getter用于对store中的数据进行加工处理形成新的数据。

1. Getter可以对store中已有的数据进行加工处理之后形成新的数据，类似Vue的计算属性。
2. store中数据发生变化，Getter的数据也会跟着变化。

//定义Getter
const store = new Vuex.Store({
    state:{
        count:0
    },
    getters:{
        showNum:state =>{
            reutrn '当前最新的数量是['+state.count +']'
        }
    }
})

//在组件中使用getters
<div>
    //插值表达式中this.可以省略
    <h3>{{$store.getters.showNum}}</h3>
</div>

getters在组件中使用：

方法一：

this.$store.getters.名称

方法二：

import {mapGetters} from 'vuex'
computed:{
    ...mapGetters(['showNum'])
}

vuex案例

main.js

store.js

App.vue

输入框数据双向绑定

新增列表项

删除事项

复选框状态绑定

修改任务完成状态

统计未完成的条数

清除已完成任务

按钮切换

切换按钮按需展示任务列表