vuex学习

 

 

 

 

1.概念

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

actions一般在需要访问接口拿数据（发送ajax请求）的时候会调用。

其实组件可以直接调用mutations部分（如果数据已知且已存在），这是允许的。

JAVA的，actions相当于Service层，Mutations相当于Dao层，State相当于数据库，VueComponent相当于Controller层

actions、mutations、state三个object对象都需要store的管理。

2.何时使用？

多个组件需要共享数据时

3.搭建vuex环境

注意import执行顺序的问题，不需要在main.js引用Vuex，而是在index.js中引用Vuex。

因为Vue框架会先把整段代码扫描一遍并且优先执行import语句，如果在main.js引入Vuex，当它执行import store from './store'时，会报错：[vuex] must call Vue.use(Vuex) before creating a store。 所以要在index.js中引入Vue和Vuex并且引用Vuex。

index.js：

/*
 * @Descripttion: 该文件用于创建Vuex中最为核心的store
 * @version: 
 * @Author: Joey
 * @Date: 2021-10-07 15:11:11
 * @LastEditors: Joey
 * @LastEditTime: 2021-10-07 15:28:40
 */

import Vue from "vue"
import Vuex from "vuex"

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

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

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


Vue.use(Vuex)

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

//导出store
// export default store

 

main.js

/*
 * @Descripttion: 
 * @version: 
 * @Author: Joey
 * @Date: 2021-08-07 22:39:56
 * @LastEditors: Joey
 * @LastEditTime: 2021-10-07 15:30:03
 */

/**
 * 该文件是整个项目的入口文件
 */

//引入vue
import Vue from 'vue'

//引入App组件，它是所有组件的父组件
import App from './App.vue'

import vueResource from 'vue-resource'

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

//引入store
import store from './store/index.js'

Vue.config.productionTip = false

Vue.use(vueResource)


const vm = new Vue({
  store: 'hello',
  render: h => h(App),
  store,
  beforeCreate() {
    //全局事件总线
    Vue.prototype.$bus = this
  }
}).$mount('#app')
// console.log(vm);

控制台输出vm和vc对象，可以看到$store已经可以正常访问

 

 案例：加减法

index.js

/*
 * @Descripttion: 该文件用于创建Vuex中最为核心的store
 * @version: 
 * @Author: Joey
 * @Date: 2021-10-07 15:11:11
 * @LastEditors: Joey
 * @LastEditTime: 2021-10-07 16:15:47
 */

import Vue from "vue"
import Vuex from "vuex"

//准备actions —— 用于响应组件中的动作
const actions = {
    jia(context, value) {
        // console.log(context, value);
        context.commit('JIA', value);
    },
    jiaOdd(context, value) {
        //jiaOdd和jiaWait都体现了actions作为service的特点：处理数据，传给DAO
        if (context.state.sum % 2) {
            context.commit('JIAODD', value);
        }
    },
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIAWAIT', value);
        }, 500)
    }
}

//准备mutations —— 用于操作数据（state）
const mutations = {
    JIA(context, value) {
        // console.log('mutations -> ', context, value);
        context.sum += value;
    },
    JIAN(context, value) {

        context.sum -= value;
    },
    JIAODD(context, value) {
        context.sum += value;
    },
    JIAWAIT(context, value) {
        context.sum += value;
    },
}

//准备state —— 用于存储数据
const state = {
    sum: 0, //当前的和
}


Vue.use(Vuex)

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

//导出store
// export default store

Count.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: Joey
 * @Date: 2021-09-21 21:51:04
 * @LastEditors: Joey
 * @LastEditTime: 2021-10-07 16:16:38
-->
<template>
  <div>
    <!-- 模板引擎内，默认this就是vc对象 -->
    <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="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.sum += this.n;
      this.$store.dispatch("jia", this.n);
    },
    decrement() {
      // this.sum -= this.n;
      // 这里减法直接调用commit，越过了actions步骤
      this.$store.commit("JIAN", this.n);
    },
    incrementOdd() {
      // if (this.sum % 2) {
      //   this.sum += this.n;
      // }
      this.$store.dispatch("jiaOdd", this.n);
    },
    incrementWait() {
      this.$store.dispatch("jiaWait", this.n);
    },
  },
};
</script>
<style scoped>
button {
  margin: 5px;
}
</style>

效果：