5.vue组件间通信——vuex

1、在线文档

     https://vuex.vuejs.org/zh/guide/
     安装：npm install --save  vuex

2、理解

   对vue应用中多个组件的共享状态进行集中式的管理（读/写）

3、状态管理应用

1）state:驱动应用的数据源
2）view:以声明方式将state映射到视图
3）actions:响应在view上的用户输入导致的状态变化（包含n个更新状态的方法）——函数

4、多组件共享状态的问题

1)多个视图依赖于同一状态
2)来自不同视图的行为需要变更同一状态
3)以前的解决办法
	 a.将数据以及操作数据的行为都定义在父组件
	 b.将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)
4)vuex就是用来解决这个问题的

5、vuex核心概念和API

1.state
1)管理状态对象,存储全局共享数据
2)每个应用将仅仅包含一个 store 实例
3）组件中读取：

//第一种方法
   $store.state.xxx
//第二种方法
   import {mapState} from 'vuex'
     computed:{
           ...mapState({
               'count'
           })
       }

   3)mutations中读取：

       increment(state){
            state.count++;
       },

2.mutations
1)包含多个直接更新state的方法（回调函数）的对象

     const mutations={
		    increment(state){
		      state.count++;
		    },
		    decrement(state,num){//接收组件传来的参数num
		        state.count=state.count-num;
		    }
     }

   2)是来触发：actions中的commit('mutations名称')
   3）只能包含同步代码，不能写异步代码
   4）组件中调用：

//第一种方法
  this.$store.commit('increment');
  this.$store.commit('decrement',2)//传参数
  
//第二种方法
import {mapMusations} from 'vuex'
	methods：{
	  ...mapMusations(['increment','decrement'])
	}

   5）actions中调用：

           addcount({commit}){
               commit('mutations名称')
           }
   

3.actions
1)包含多个事件回调函数对象

      const actions={
        incrementSync({commit,state},num){
           setTimeout(()=>{
             state.count=state.count+num;
           },1000)
        }
}

   2)通过执行commit()来触发mutations的调用，间接更新state
   3)谁来触发：组件中$store.dispatch('action名称')

//第一种方法
   this.$store.dispatch('incrementSync');
   this.$store.dispatch('incrementSync',num);//传参数
//第二种方法
   import {mapActions} from 'vuex'
      methods：{
        ...mapActions(['addAsync','addNAsync'])
     }

   4）可以包含异步代码（定时器，ajax）

4.getters
1)包含多个计算属性的对象
2)谁来读取：组件中$store.getters.xxx

//第一种方法
 this.$store.getters.showNum
//第二种方法
  import {mapGetters} from 'vuex'
  computed:{
      ...mapGetters(['showNum'])
  }

5.modules
1)包含多个module
2)一个module是一个store的配置对象，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter
3）与一个组件（包含共享数据）对应
4）用法
第一步：编写模块

//编写一个todo.js模块
      const state={
            todolist:StorageUtil.readTodos()
      }
	 const getters={
	   
	 }

	const mutations={
	   
	}

    const actions={
  
    }

   export default{
    namespaced: true,
    state,
    getters,
    mutations,
    actions
  }

第二步：引入store文件中

export default new Vuex.Store({
    modules: {
        todo
    },
})

第三步：组件调用
1）调用state

   computed:{
   //方法1：
       ...mapState('todo', {
        todolist: state => state.todolist,
       })
  //方法2：
      todo(){
        this.$store.state.todo.todolist
      }
  },

2）调用getters

   computed:{
   //方法1：
      ...mapGetters('todo', {  // 命名空间module1
           allcount: 'allcount', 
           donecount:'donecount' 
       }),
  //方法2：
      allcount(){
        this.$store.getters.todo.allcount
      }
  },

3）调用mutations

  methods:{
   //方法1：
     ...mapMutations('todo',{
            clear:'clear'
        })
  //方法2：
      clear(){
        this.$store.commit('todo/clear')
      }
  },
 }

4）调用actions

   methods:{
   //方法1：
     ...mapActions('todo',{
       changeDone:'changeDone',
       del:'del'
     })
  //方法2：
      del(){
        this.$store.dispatch('todo/del')
      }
  },
 }

6.向外暴露store对象

   export default new Vuex.Store({
              state,
              mutations,
              actions,
              getters
    })

7、映射store

import store from './store'
new Vue({
     store
})

8、store对象

1）所有用vuex管理的组件中都多一个属性$store,它就是一个store对象
2）属性：
       state,//注册的state对象
       getters,//注册的getters对象
       mutations,
       actions

3）方法
dispatch(actionName,data)//分发调用action
commit(mutationName,data)//触发mutations

9、aciotins两种方法的传参方式

1）方法1：$store.dispatch(‘actionName’)

  <button @click="clear">清空所有完成任务</button>
   
  methods:{
       clear(){
          this.$store.dispatch('clear',参数);//只能传递一个参数，如传多个参数，可写出对象形式传递
          this.work='';
       }
  }

1）方法2：…mapActions（）

  <button @click="clear(参数)">清空所有完成任务</button>//参数通过方法直接传递，只能传递一个参数，如传多个参数，可写出对象形式传递
   
  methods:{
        ...mapActions('todo',{
           add:'add'
       })
  }