vuex的使用和理解

目录

Vuex

什么时候使用vuex

Vuex 工作原理图

搭建 Vuex 环境

Vuex的基本使用

Getters配置项

四个map方法的使用

---

Vuex

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

2 Vuex Github地址

什么时候使用vuex

1 多个组件依赖于同一状态

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

Vuex 工作原理图

搭建 Vuex 环境

1 下载安装vuex         npm i vuex

Vue2要使用vuex@3版本 npm i vuex@3

Vue3要使用vuex4版本

2 创建 src/store/index.js 该文件用于创建 Vuex 中最为核心的 store

import Vue from 'vue'

import Vuex from 'vuex' // 引入Vuex

Vue.use(Vuex) // 应用Vuex插件

const actions = {} // 准备actions——用于响应组件中的动作

const mutations = {} // 准备mutations——用于操作数据（state）

const state = {} // 准备state——用于存储数据

// 创建并暴露store

export default new Vuex.Store({

actions,

mutations,

state,

})

3在 src/main.js 中创建 vm 时传入 store 配置项

Vuex的基本使用

1 初始化数据state，配置actions、mutations，操作文件 store.js

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

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

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

实现简单加减代码

main.js

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

Vue.config.productionTip = false

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

App.vue

<template>
  <div>
  <Count/>
  </div>
 </template>
 <script>
 import Count from "./components/Count";
 export default {
  name: "App",
  components: { Count },
 };
 </script>

components/Count.vue

<template>
    <div>
    <h2>当前求和为：{{ $store.state.sum }}</h2>
    <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() {
            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)
        },
    }
    }
</script>
<style>
    button 
    {
        margin-left: 5px;
        }
</style>

store/index.js

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

Vue.use(Vuex)

//响应组件中的动作 
const actions = {
    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)
    }
}
// 用于操作数据
const mutations = {
    JIA(state,value){
        console.log("mutations中JIA调用")
        state.sum += value
    },
    JIAN(state,value){
        console.log("mutations中JIAN调用")
        state.sum -=value
    }
}
// 用于存储数据
const state = {
    sum:0
}

export default new Vuex.Store({
    actions,
    mutations,
    state
})

实现效果

Getters配置项

1概念：当state中的数据需要经过加工后再使用时，可以使用getters加工，相当于全局计算属性

2 在 store.js 中追加 getters 配置

四个map方法的使用

1. mapState方法：用于帮助映射state中的数据为计算属性
2. mapGetters方法：用于帮助映射getters中的数据为计算属性
3. mapActions方法：用于帮助生成与actions对话的方法，即包含 $store.dispatch(xxx)函数
4. mapMutations方法：用于帮助生成与mutations对话的方法，即包含 $store.commit(xxx)的函数