67.vue2.0学习 —— vuex

vuex是什么

  专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

Github地址: https://github.com/vuejs/vuex

什么时候使用Vuex

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

Vuex工作原理图

vuex核心概念和API

state

1. vuex管理的状态对象
2. 它应该是唯一的
3. 示例代码：

   const state = {
   	xxx:initValue
   }
   

actions

1. 值为一个对象，包含多个响应用户动作的回调函数

2. 通过commit( ) 来触发mutation中函数的调用, 间接更新state

3. 如何触发actions中的回调？
   在组件中使用: $store.dispatch('对应的action回调名') 触发

4. 可以包含异步代码（定时器, ajax等等）

5. 示例代码：

   const actions = {
   	zzz ({commit,state},data) {
   		commit ('yyy',{data})
   	}
   }
   

mutations

1. 值是一个对象，包含多个直接更新state的方法
2. 谁能调用mutations中的方法？如何调用？
   在action中使用：commit('对应的mutations方法名') 触发
3. mutations中方法的特点：不能写异步代码、只能单纯的操作state
4. 示例代码：

   const mutations = {
   	yyy (state,{data}) {
   		// 更新state的某个属性
   	}
   }
   

getters

1. 值为一个对象，包含多个用于返回数据的函数
2. 如何使用？—— $store.getters.xxx
3. 示例代码：

   const getters = {
   	mmm (state) {
   		console.log('mmm 被调用了')
   		return state.xxx的属性改变后的值
   	}
   }
   
   export default new Vuex.Store({
     actions,
     mutations,
     state,
     getters,
   })
   

mapState和mapGetters

mapState和mapGetters 辅助函数帮助我们生成计算属性

import { mapState, mapGetters } from 'vuex'

// 组件内
computed: {
    // 数组写法: 直接传入vuex中state的属性
    // ...mapState(['sum', 'school']), 
    // 对象写法: 自定义属性, 值为vuex中state中的属性
    ...mapState({ sumTest: 'sum', schoolTest: 'school' }),

    // ...mapGetters({ bigSum: 'bigSum' }),
    ...mapGetters(['bigSum']),
},

mapActions和mapMutations

mapActions和mapMutations 辅助函数帮助我们生成methods方法

<button @click="jia(n)">+</button>
<button @click="addOdd(n)">当前求和为奇数再加</button>
<button @click="addwait(n)">等一等再加</button>

<script>
  methods: {
     // 也可以写对象的形式
    ...mapActions(['addOdd', 'addwait']),
    ...mapMutations(['jia', 'jian']),
  },
</script>

modules

1. 包含多个module

2. 一个module是一个store的配置对象

3. 与一个组件（包含有共享数据）对应

   // store.js
   import Vue from 'vue'
   import Vuex from 'vuex'
   import xxx from './xxx'
   import yyy from './yyy'
   Vue.use(Vuex)
   
   export default new Vuex.Store({
     modules: {
       XXX:xxx,
       YYY:yyy,
     },
   })
   

基本使用

1. 创建store对象

   import Vue from 'vue'
   import Vuex from 'vuex'
   // 在Vue中使用Vuex
   Vue.use(Vuex)
   // 定义actions
   // 调用$store.dispatch(xxx,value)会触发actions中的函数
   const actions = {
     add({ commit }, value) {
       commit('jia', value)
     }
   }
   
   // 定义mutations,类似于redux中的reducer
   const mutations = {
     // 在action中调用commit(xxx, value) 会触发mutations中的函数
     jia(state, value) {
       state.sum += value
     }
   }
   
   // 定义状态
   const state = {
     sum: 0,
   }
   
   // 创建store实例
   export default new Vuex.Store({
     actions,
     mutations,
     state,
   })
   

2. 在vm中配置store

   import store from '自定义的store.js的路径'
   new Vue({
     el: '#app',
     render: (h) => h(App),
     store: store,
   })
   

3. 获取和修改数据

   <!-- 获取数据 vuex中的数据发生变化会自动流向视图-->
   <h1>当前求和为：{{ $store.state.sum }}</h1> 
   
   <!-- 修改数据 -->
   methods: {
       increment() {
             this.$store.dispatch('add', this.n)
       },
   }
   

🌺相关推荐：上一篇：slot 插槽      下一篇：vue路由