什么是vuex

1、Vuex介绍

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

简单说就是vuex可以实现任意组件对共享数据的读写

2、安装Vuex

vue2中要安装vuex3

vue3中要安装vuex4

npm i vuex@3

 3、配置Vuex

 3.1 创建文件src/store/index.js

这是固定写法，其他人看到后也能明白这是store的配置。

//src/store/index.js
//引入Vue核心库
 import Vue from 'vue'

 //引入Vuex后，就可以在创建vue时传入store配置，否则store配置不生效。在vm上会有$store
 import Vuex from 'vuex'
 
 //应用Vuex插件，使用vuex后，才可以在vm上配置store配置项，否则不生效
 Vue.use(Vuex)
 
 //准备actions对象。响应组件(vc)中用户的动作，在这里去调用mutations中的操作
 const actions = {}

 //准备mutations对象。修改state中的数据
 const mutations = {}
 
 //准备state对象。用于保存数据，类似vue中的data
 const state = {}

 //准备getters：用于将state中的数据进行加工
const getters = {}
 
 //创建并暴露store
 export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters
 })

 

3.2 Vue配置store配置项

//main.js
import Vue from 'vue'
import App from './App.vue'

//引入我们创建的store，默认会找index.js，如果不是index.js，需要指定全路径
import store from './store'

//创建vm
new Vue({
   el:'#app',
   render: h => h(App),
   store //配置store
})

以上完成了Vuex的配置 

 

4、Vuex原理图

• 组件VC中调用store/index.js文件中action对象里的方法（可以跳过action，直接调用mutations中的方法）
• 在action中去mutations中的方法
• mutations中去修改state

组件中读取vuex中的数据：$store.state.sum

组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

 

 

 

5、案例

Ⅰ、先定义store/index.js里的方法

 

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
    /* jia(context,value){
        console.log('actions中的jia被调用了')
        context.commit('JIA',value)
    },
    jian(context,value){
        console.log('actions中的jian被调用了')
        context.commit('JIAN',value)
    }, */
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了')
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        console.log('actions中的jiaWait被调用了')
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
//准备mutations——用于操作数据（state）
const mutations = {
    JIA(state,value){
        console.log('mutations中的JIA被调用了')
        state.sum += value
    },
    JIAN(state,value){
        console.log('mutations中的JIAN被调用了')
        state.sum -= value
    }
}
//准备state——用于存储数据
const state = {
    sum:0 //当前的和
}
//准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

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

 

 

 

 Ⅱ、Vue配置store项

同上面的3.2

Ⅲ、在组件中去调用store中定义的方法

<template>
   <div>
      <h1>当前求和为：{{$store.state.sum}}</h1>

      <!-- 获取getter里的 -->
      <h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3>

      <select v-model.number="n">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
      </select>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="incrementOdd">当前求和为奇数再加</button>
      <button @click="incrementWait">等一等再加</button>
   </div>
</template>

<script>
   export default {
      name:'Count',
      data() {
         return {
            n:1, //用户选择的数字
         }
      },
      methods: {
         increment(){
           //跳过dispatch，直接commit
            this.$store.commit('JIA',this.n)
         },
         decrement(){
            this.$store.commit('JIAN',this.n)
         },
         incrementOdd(){
            this.$store.dispatch('jiaOdd',this.n)
         },
         incrementWait(){
            this.$store.dispatch('jiaWait',this.n)
         },
      },
      mounted() {
         console.log('Count',this.$store)
      },
   }
</script>

<style lang="css">
   button{
      margin-left: 5px;
   }
</style>