Vue-Vuex的使用

1.定义

1.vuex是什么:

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

2.什么时候使用Vuex

​ 1.多个组件以来同一状态

​ 2.来自不同组件的行为需要变更同一状态

3.Vuex工作原理图

2.vuex核心概念和API

1.state

1.vuex管理的状态对象(存放数据的对象)

2.它应该时唯一的

3.示例代码:

const state = {
   // key:value
}

2.actions

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

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

3.示例代码:

const actions = {
	//函数
}

3.mutations

1.值是一个对象，包含多个直接更新state的方法

2.谁能调用mutations中的方法？如何让调用？

​ 在action中使用:**commit(‘对应的mutations方法名’)**触发

3.mutations中方法的特点：不能写异步代码、只能单纯的操作state

4.示例代码:

const mutations = {
   //函数
}

3.vuex使用流程

1.下载vuex

npm i vuex

2.创建store.js用于导入并定义Vuex

​ 新建store文件夹，添加index.js文件，并定义相关方法

//该文件用于创建Vuex中最核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {
  
}
//准备mutations--用于操作数据(state)
const mutations = {
 
}
//准备state--用于存储数据
const state = {
    
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

​ 3.在vue的入口文件main.js中注册vuex

import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
  store,//注册vuex
  beforeCreate(){
    //将事件总线挂载在Vue实例上
    Vue.prototype.$bus = this
  }
}).$mount('#app')

4.对于不需要向后端请求数据的情况，可以跳过dispatch方法，直接调用commit方法(跳过actions过程，直接来到mutations)，流程:

​ this.$store.commit(‘Add’,this.n) ==> state.count += value

对于需要向后端请求数据的情况，需要在actions中向后端发起请求获得数据，流程:

​ this.$store.commit(‘Add’) ==> context.commit(‘AddOdd’,value) ==> state.count += value

5.渲染数据

​ 在组件中使用通配符{{$store.state.xxx}}获取数据

4.基本使用

案例:点击按钮对数字进行各种操作

我们将求和之后的数字定义为count，存入vuex的临时组件中，每次进行操作从原组件中调用vuex的api，最终完成求和的计算

Count.vue组件:

  <div >
      <h1>当前求和为:{{$store.state.count}}</h1>
      <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button @click="add">+</button>
      <button @click="reduce">-</button>
      <button @click="addOdd">当前求和为奇数再加</button>
      <button @click="addWait">等一等再加</button>
  </div>

export default {
    data(){
      return{
       n:1,//选择框中选择的数字
      }
    },
    methods:{
      add(){
        this.$store.commit('Add',this.n)
      },
      reduce(){
        this.$store.commit('Reduce',this.n)
      },
      addOdd(){
        this.$store.dispatch('addOdd',this.n)
      },
      addWait(){
           this.$store.dispatch('addWait',this.n)
      }
    }
}

store中index.js

//该文件用于创建Vuex中最核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {
    addOdd(context,value){
        if(context.state.count % 2){
           context.commit('AddOdd',value) 
        }
    },
    addWait(context,value){
        setTimeout(()=>{
            context.commit('AddWait',value) 
        },1000)
    },
}
//准备mutations--用于操作数据(state)
const mutations = {
    Add(state,value){
        state.count += value
    },
    Reduce(state,value){
        state.count -= value
    },
    AddOdd(state,value){
        state.count += value
    },
    AddWait(state,value){
        state.count += value
    }
}
//准备state--用于存储数据
const state = {
    count:1  
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

效果

5.getters的使用

1.概念:当state中的数据需要经过加工后再使用时，可以使用getters加工,类似于组件中的计算属性

2.在store.js中追加getters配置

...

const getters = {
    bigCount(state){
        return state.count*10
    }
    
}
//创建并暴露store
export default new Vuex.Store({
  	...
    getters
})

3.组件中读取数据: $store.getters.XXX

4.流程:对state中的数据修改后返回，组件通过**{{$store.getters.XXX}}**来接收数据并渲染

6.四个map方法的使用

定义:使用vuex提供的map方法可以对组件中的计算属性和方法进行映射，可以大大的减少代码量，提高代码的复用率

1.mapState

理解:用于帮助我们映射state中的数据为计算属性

 computed:{
     //借助mapState生成计算属性:count,student,school(对象写法)
     //对象中的key是我们在自己的组件中渲染时需要调用的值，value是我们在store中state内定义的值
      ...mapState({count:'count',student:'student',school:'school'}),
     
     //借助mapState生成计算属性:count,student,school(数组写法)
      ...mapState(['count','student','school']),
    },

2.mapGetters

理解:用于帮助我们映射getters中的数据为计算属性

 computed:{
     //借助mapGetters生成计算属性:bigCount(对象写法)
     //对象中的key是我们在自己的组件中渲染时需要调用的值，value是我们在store中getters内定义的值
      ...mapState({count:'count',student:'student',school:'school'}),
     
     //借助mapGetters生成计算属性:bigCount(数组写法)
      ...mapGetters(['bigCount'])
    },

3.mapActions

理解:用于帮助我们生成与action对话的方法，即：包含$store.dispatch(xxx)的函数

   methods:{
     //借助mapActions生成方法:addOdd，addWait(对象写法)
     //对象中的key是我们在自己的组件中需要调用的方法，value是我们在store中actions内定义的方法名
     ...mapActions({addOdd:'addOdd',addWait:'addWait'}),
     
     //借助mapActions生成方法:addOdd，addWait(数组写法)
      ...mapActions(['addOdd','addWait'])
    }

4.mapMutations

理解：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

  methods:{
     //借助mapActions生成方法:Add，Reduce(对象写法)
     //对象中的key是我们在自己的组件中需要调用的方法，value是我们在store中mutations内定义的方法名
     ...mapMutations({add:'Add',reduce:'Reduce'}),
     
     //借助mapActions生成方法:Add，Reduce(数组写法)
      ...mapActions(['Add','Reduce'])
    }

注意:当我们使用mapActions和mapMutations方法时，我们需要将dispatch和commit中需要传递的值通过组件中方法传参，例如:

 <button @click="add(n)">+</button>

7.vuex模块化+命名空间

1.目的:使得代码更好维护，让多种数据分类更加明确

2.修改store.js

//count组件相关模块
const numberAbout = {
    namespaced:true,
    actions:{...},
    mutations:{...},
    state:{...},
    getters:{...}
}
//person组件相关模块
const personAbout = {
   	namespaced:true,
    actions:{...},
    mutations:{...},
    state:{...},
    getters:{...}
}


//创建并暴露store
export default new Vuex.Store({
    //vuex模块化
    modules:{
        //在js语法中 numberAbout:'numberAbout' === numberAbout
        numberAbout,
        personAbout
    }
})

3.开启命名空间后，组件中读取state数据

//方式一，直接读取
this.$store.state.personAbout.personList
//方式二，借助mapState读取
...mapState('numberAbout',['count','school','student'])

4.开启命名空间后，组件中读取getters数据

//方式一，直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二，借助mapGetters读取
...mapGetters('numberAbout',['count','school','student'])

5.开启命名空间后，组件中读取dispatch

//方式一，直接读取
this.$store.dispatch['personAbout/addPerson'，person]
//方式二，借助mapActions读取
...mapActions('numberAbout',['count','school','student'])

6.开启命名空间后，组件中读取commit

//方式一，直接commit
this.$store.commit['personAbout/addPerson'，person]
//方式二，借助mapMutations读取
...mapMutations('numberAbout',['count','school','student'])