vuex的基本使用

1.环境搭建

由于2022年2月起发布了Vue3.0过后,我们每一次全局安装的vuex就是默认的4.0版本,但是使用Vue2来搭建项目就必须使用vuex3.0版本,所以这是就看我们自己所需要搭建的项目是使用什么Vue版本了,使用Vue2开发项目就安装vuex3版本,使用Vue3开发项目就使用vuex4版本
安装vuex 3版本
$npm i vuex@3
安装vuex 4版本
$npm i vuex

搭建vuex开发环境

官网推荐格式:首先在项目的src文件夹当中,创建一个名为 store 的文件夹,里面新建一个index.js文件用于创建全局仓库(store)

代码如下:

Index.js

// 创建vuex中最核心的部分--store(只要我们看见store文件夹就知道是vuex)

// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'

// 创建actions
const actions = {
//写业务逻辑
}
// 创建mutations
const mutations = {
//只加工数据,不写业务逻辑
}
// 创建state
const state = {
//填写数据(共享数据)
}

// 调用Vuex插件
// 切记一定要在这里调用,不然会报错(若在main.js中调用的话
// 因为vue会插手代码的编排,会导致先引入后执行vuex就会报错)
Vue.use(Vuex)

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

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

// 引入插件(store)
import store from './store/index'

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    // 这里调用全局仓库(store)
    store,
    // 在创建vm实例对象之前安装全局事件总线
    beforeCreate() {
        Vue.prototype.$bus = this //给当前的vm(这里的this)安装全局事件总线
    },
})

基本使用:(配置store完成后)

1.组件中读取vuex中的数据：$store.state.sum
2.组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)
> 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

案例实践(求和案例)

要求:
- 1.加法+n
- 2.减法-n
- 3.奇数+n
- 4.延迟500ms+n

图解:

代码解析:

组件Count(除去css样式)

<template>
  <div>
      <!-- 读取vuex中的数据 -->
      <h1>当前求和为：{{$store.state.sum}}</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="sub">-</button>
      <button @click="addOdd">当前求和为奇数再加</button>
      <button @click="addWait">等一等再加</button>
  </div>
</template>

<script>
    export default {
        name:'Count',
        data() {
            return {
                n:1, //用户选择的数字
            }
        },
        methods: {
            add(){
                // 因为纯加减没有业务逻辑可以让组件越过actions直接联系mutations
                // 这里的大写是用于区分存在actions(小写)还是mutations(大写)
                // 组件->mutations(无业务逻辑)
                this.$store.commit('ADD',this.n)
            },
            sub(){
                // 因为纯加减没有业务逻辑可以让组件越过actions直接联系mutations
                // 这里的大写是用于区分存在actions(小写)还是mutations(大写)
                // 组件->mutations(无业务逻辑)
                this.$store.commit('SUB',this.n)
            },
            addOdd(){
                // 组件->actions->mutations(有业务逻辑:奇数＋)
                this.$store.dispatch('addOdd',this.n)
            },
            addWait(){
                // 组件->actions->mutations(有业务逻辑:延迟+)
                this.$store.dispatch('addWait',this.n)
            },
        },
        mounted() {
            console.log('Count',this)
        },
    }
</script>

Vuex(store里面的index.js)

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

//准备actions——用于响应组件中的动作
// 这里是用来写业务逻辑的,比如判断
const actions = {
    // 这两个真正意义上是没有业务逻辑的可以直接通过组件联系mutations
    // context参数:字面意思为上下文,一个对象,里面包括了你可能用到的属性和方法
    // value参数:就是你在组件当中通过.dispatch传过来的参数
    /* add(context,value){
        console.log('actions中的add被调用了')
        context.commit('add',value)
    },
    addn(context,value){
        console.log('actions中的addn被调用了')
        context.commit('addN',value)
    }, */
    addOdd(context,value){
        console.log('actions中的addOdd被调用了')
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
        console.log('actions中的addWait被调用了')
        setTimeout(()=>{
            context.commit('SUB',value)
        },500)
    }
}
//准备mutations——用于操作数据（state）
// 这里不能写业务逻辑了,这里是真正加工数据的地方,只操作数据
const mutations = {
    // 这里的大写是用于区分存在actions(小写)还是mutations(大写)
    ADD(state,value){
        console.log('mutations中的ADD被调用了')
        state.sum += value
    },
    SUB(state,value){
        console.log('mutations中的SUB被调用了')
        state.sum -= value
    }
}
//准备state——用于存储数据
const state = {
    sum:0 //当前的和
}

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