浅析Vuex

文档地址-> Vuex中文文档地址

1. Vuex概述

1.1 组件之间共享数据的方式

• 父向子传值：v-bind属性绑定
• 子向父传值：v-on事件绑定
• 兄弟组件之间共享数据：EventBus（$on接收方，$emit发送方）

EventBus使用方法-> vue组件通信方式之eventBus（PS：来源于Hello_MrShu博主）

1.2 Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。

1.3 使用Vuex统一管理状态的好处

• 能够在vuex中集中管理共享的数据，易于开发和后期维护
• 能够高效地实现组件之间的数据共享，提高开发效率
• 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

1.4 什么样的数据适合存储在Vuex中

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可。

2. Vuex的基本使用

1. 安装vuex依赖包

npm install vuex@next --save

2. 导入vuex包

main.js文件同级创建store.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state:{

    },
    mutations:{

    },
    actions:{
        
    }
})

3. 创建store对象
4. 将store对象挂载到vue实例中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
    store,
    router,
    render: h => h(App)
}).$mount('#app')

3.2 State

State是提供唯一的公共数据源，所有共享的数据都要同意放到Store的State中进行存储

组件访问State中数据的第一种方式：this.$store.state.全局数据名称

组件访问State中数据的第二种方式：

1. 从vuex中按需导入mapState函数

import { mapState } from 'vuex'

2. 将全局数据，映射为当前组件的计算属性

computed: {
	...mapState(['全局数据名称1','全局数据名称2',...])
}

3.3 Mutation

Mutation用于变更Store中的数据

• 只能通过mutation变更Store数据，不可以直接操作Store中的数据
• 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化
• mutation中不能处理异步操作

触发mutation的第一种方式：

 export default new Vuex.Store({
    state: {
        count: 0
    },
    //定义mutation
    mutations: {
        add(state) {
            state.count++
        },
        //第一个参数永远是state
        addN(state, step) {
        	state.count += step
        },
    },
    actions: {

    }
})

//触发mutation
methods: {
	handle1(){
		//触发mutation的第一种方式
		this.$store.commit('add')
	},
	handle2(){
		//触发mutation时携带参数
		this.$store.commit('addN', 2)
	},
}

触发mutation的第二种方式：

1. 从vuex中按需导入mapMutations函数

import { mapMutations} from 'vuex'

2. 将指定的mapMutations函数，映射为当前组件的methods函数

methods: {
	...mapMutations(['函数1','函数2',...])
}

3.4 Action

Action用于处理异步任务。

如果通过异步操作变更数据，必须套难过Action，而不是使用Mutation，但是在Action中还是要用过触发Mutation的方式间接变更数据。

触发action的第一种方式：

//定义action
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            state.count++
        },
        addN(state, step) {
        	state.count += step
        },
    },
    actions: {
        addAsync(context) {
            setTimeout(() => {
                context.commit('add')
            }, 1000)
        },
        addNAsync(context,step) {
            setTimeout(() => {
                context.commit('addN',step)
            }, 1000)
        },
    }
})

//触发action
methods: {
	//触发action的第一种方式
	handle1(){
		this.$store.dispatch('addAsync')
	},
	handle2(){
		//触发action的第一种方式
		this.$store.dispatch('addNAsync',2)
	},
}

触发action的第二种方式：

1. 从vuex中按需导入mapActions函数

import { mapActions} from 'vuex'

3. 将指定的mapActions函数，映射为当前组件的methods函数

methods: {
	...mapActions(['函数1','函数2',...])
}

3.5 Getter

Getter用于对Store中的数据进行加工处理形成新的数据（类似于计算属性），Store中数据发生变化，Getter中的数据也会变化

//定义getter
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            state.count++
        }
    },
    actions: {
        addAsync(context) {
            setTimeout(() => {
                context.commit('add')
            }, 1000)
        }
    },
    getters:{
        showNum(state) {
            return '当前数值是：' + state.count
        }
    }
})

使用getters的第一种方式：this.$store.getters.名称
使用getters的第二种方式：

1. 从vuex中按需导入mapGetters函数

import { mapGetters} from 'vuex'

2. 将指定的mapGetters函数，映射为当前组件的computed属性

computed: {
	...mapGetters(['属性1','属性2',...])
}

4. 模块化使用

1. 目录结构
   

2. 模块文件里的内容
   namespaced: true

export default {
  namespaced: true,
  state: {
    count: 0,
  },
  mutations: {
    add(state) {
      state.count++;
    },
    addStep(state, step) {
      state.count += step;
    },
    sub(state) {
      state.count--;
    },
    subStep(state, step) {
      state.count -= step;
    }
  },
  actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('add');
      }, 1000)
    },
    addStepAsync(context, step) {
      setTimeout(() => {
        context.commit('addStep', step);
      }, 1000)
    },
    subAsync(context) {
      setTimeout(() => {
        context.commit('sub');
      }, 1000)
    },
    subStepAsync(context, step) {
      setTimeout(() => {
        context.commit('subStep', step);
      }, 1000)
    },
  },
  getters: {
    countText(state) {
      return `getter：${state.count}`
    }
  }
}

3. index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

import testModules from './modules/testModules'

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    testModules: testModules
  },
});

4. 使用

<template>
  <div class="add">
    <h3>当前最新的count值为：{{$store.state.testModules.count}}</h3>
    <p>{{$store.getters['testModules/countText']}}</p>
    <p>同步</p>
    <button @click="add">+1</button>
    <button @click="addStep(2)">+2</button>
    <button @click="addStep(3)">+3</button>
    <p>异步</p>
    <button @click="addAsync">+1</button>
    <button @click="addStepAsync(2)">+2</button>
    <button @click="addStepAsync(3)">+3</button>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {
    add() {
      // this.$store.state.count++; // 不合法
      this.$store.commit('testModules/add');
    },
    addStep(n) {
      this.$store.commit('testModules/addStep', n);
    },
    addAsync() {
      this.$store.dispatch('testModules/addAsync');
    },
    addStepAsync(n) {
      this.$store.dispatch('testModules/addStepAsync', n);
    },
  },
}

</script>
<style>
</style>

<template>
  <div class="sub">
    <h3>当前最新的count值为：{{count}}</h3>
    <p>{{countText}}</p>
    <p>同步</p>
    <button @click="sub">-1</button>
    <button @click="subStep(2)">-2</button>
    <button @click="subStep(3)">-3</button>
    <p>异步</p>
    <button @click="subAsync">-1</button>
    <button @click="subStepAsync(2)">-2</button>
    <button @click="subStepAsync(3)">-3</button>
  </div>
</template>

<script>
import { mapState } from "vuex"
import { mapMutations } from "vuex"
import { mapActions } from "vuex"
import { mapGetters } from "vuex"
export default {
  data() {
    return {

    }
  },
  computed: {
    ...mapState('testModules', ['count']),
    ...mapGetters('testModules', ['countText']),
  },
  mounted() {
  },
  methods: {
    ...mapMutations('testModules', ['sub', 'subStep']),
    ...mapActions('testModules', ['subAsync', 'subStepAsync']),
  },
}

</script>
<style>
</style>

5. vue3 组合式API使用 vuex

文件结构同上述4
可以通过调用 useStore 函数，来在 setup 钩子函数中访问 store。这与在组件中使用选项式 API 访问 this.$store 是等效的。

<template>
  <h3>
    vue3 组合式API使用vuex
  </h3>
  <p>{{ store.state }}</p>
  <p>{{ store.getters }}</p>
  <p>count：{{ store.state.count }}</p>
  <button @click="store.commit('add')">+1</button>
  <button @click="store.commit('addStep', 2)">+2</button>
  <button @click="store.dispatch('addAsync')">+1（延时）</button>
  <button @click="store.dispatch('addStepAsync', 2)">+2（延时）</button>
  <p>模块：</p>
  <p>count：{{ store.state.testModules.count }}</p>
  <button @click="store.commit('testModules/add')">+1</button>
  <button @click="store.commit('testModules/addStep', 2)">+2</button>
  <button @click="store.dispatch('testModules/addAsync')">+1（延时）</button>
  <button @click="store.dispatch('testModules/addStepAsync', 2)">+2（延时）</button>
</template>

<script setup>
import { useStore } from 'vuex'

const store = useStore()
</script>