高效的组件通信技术 Vuex -- 入门

一、基础概念

Vuex作用 : 频繁、大范围的数据共享 ( 场景：购物车 )

Vuex优点 : 1.数据存取一步到位。2.数据流动清晰。3.响应式。

二、使用步骤

1. 下包  yarn add vuex
2. 引入 main.js   import Vuex from 'vuex'
3. 安装插件  Vue.use( Vuex )
4. 创建 store 实例对象  const store = new Vuex.Store( { } )
5. 挂载到 Vue 实例上  new Vue( { store } ) 

三、 state 基本用法

作用 : 存储全局共享数据

用法

1.定义数据:

const store = new Vuex.Store({
  state: {
    count: 0 // 共享的数据
  }
})

2.组件中使用数据

直接访问 
  this.$store.state.count
辅助函数访问
  1. 按需导入辅助函数
     import { mapState } from 'vuex'
  2. 在 computed 中调用辅助函数并展开结果
     computed: {
       ...mapState(['count'])
     }
辅助函数原理: mapState() 得到的是一个对象, 对象中有导入的数据对应的函数{ count: function() {} }

四、 mutations 基本用法

作用 : 修改 state 中的数据, state 中的数据必须由 mutations 的函数修改, 只有这样才可以被 DevTools 监视到

用法

1. 定义函数

const store = new Vuex.Store({
  state: {
    count: 0 // 共享的数据
  },
  mutations: {
    add(state) {
      state.count ++
    }
  }
})
注意:1.所有 mutations 的函数第一个参数都是 state
     2.第二个参数是载荷 payload, 调用方法时传递过来的参数

2. 在组件中调用函数

直接调用
   this.$store.commit('add')
辅助函数
   1. 按需导入辅助函数
      import { mapMutations } from 'vuex'
   2. 在 methods 中调用辅助函数并展开结果
      methods: {
       ...mapMutations(['add'])
      }
   3. 调用 methods 中的 add 方法
      this.add()

3. 提交载荷 (调用函数传参)

   this.$store.commit('add', { num: 10 })
   this.add({ num: 10 })

五、 actions 基本用法

作用 : Vuex 中的异步操作都需要用 actions

注意 : 因为 mutations 中必须是同步函数, 如果在 mutations 中做异步任务, DevTools 就无法正确的监视到数据变化,actions 中不能直接修改 state, 必须交给 mutations 函数修改

用法

1. 定义函数

const store = new Vuex.Store({
  state: {
    count: 0 // 共享的数据
  },
  mutations: {
    add(state) {
      state.count ++
    }
  },
  actions: {
    asyncAdd(context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    }
  }
})

注意 : 1. 所有 actions 的函数第一个参数都是 context, 就是一个 store 对象, 可以用 commit 调用 mutations 函数
       2. 第二个参数是载荷 payload, 调用方法时传递过来的参数		
                       			

2. 在组件中调用函数

直接调用
   this.$store.dispatch('asyncAdd')
辅助函数
   1. 按需导入辅助函数
      import { mapActions } from 'vuex'
   2. 在 methods 中调用辅助函数并展开结果
      methods: {
      ...mapActions(['asyncAdd'])
      }
   3. 调用 methods 中的 asyncAdd 方法
      this.asyncAdd()

3. 提交载荷 (调用函数传参)

  this.$store.dispatch('asyncAdd', { num: 10 })
  this.asyncAdd({ num: 10 })

六、getters基本用法

作用 : 全局共享的计算属性, 解决了组件内计算属性局限性的问题

用法

1. 定义 getters

const store = new Vuex.Store({
  state: {
    count: 0 // 共享的数据
  },
  getters: {
    total(state) {
      return state.count * 10
    }
  }
})

注意 : 所有 getters 的函数第一个参数都是 state

2. 在组件中使用 getters

直接使用
  this.$store.getters.total				
辅助函数			
  1. 按需导入辅助函数
     import { mapGetters } from 'vuex'				
  2. 在 computed 中调用辅助函数并展开结果
     computed: {
      ...mapGetters(['total'])
     }
  3. 调用计算属性
     this.total

七、modules 基本用法

作用 : 项目大了会有很多模块的数据, 如果都放到全局管理会造成很大的困难, 拆分为多个子模块进行管理

用法

1. 定义子模块
   写一个 js 文件, 导出一个对象, 对象中存放 Vuex 的核心成员
2. 导入子模块
   import count from ‘./count.js’
3. 注册子模块
   const store = new Vuex.Store({
   modules: {
   // 模块名: 模块对象
   count
   }
   })

八、开启命名空间

作用 : 如果没有命名空间, 所有子模块中的数据或 mutations 等都是约等于全局, 如果同名, 触发时会同时触发, 没有办法做到很好的隔离

用法

1.将子模块中 namespaced 属性设置为 true

2开启之后访问子模块的 state / mutations / actions / getters 发生变化了

state
	辅助函数 mapState
	...mapState('注册模块的名称', [要映射的数据])
mutations
	1. 使用 commit 方法
		$store.commit('模块名/方法名')
	2. 辅助函数
		...mapMutations('模块名', [要映射的方法])
actions
	1. 使用 dispatch 方法
		$store.dispatch('模块名/方法名')
	2. 辅助函数
		...mapActions('模块名', [要映射的方法])
getters
	辅助函数 mapGetters
	...mapGetters('模块名', [要映射的计算属性])