VUE3.0,DAY58，vuex基础

vuex

求和案例

使用一个求和案例来分析，我们实现了四个按钮，按照不同的情况对当前的和进行累加。

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <select v-model.number="numbers">
      <!-- value前边加冒号，就会被当成js表达式处理，如果不加，value值就是字符串形式 -->
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="JiaFa">+</button>
    <button @click="JianFa">-</button>
    <button @click="JiShu">当前求和为奇数在加</button>
    <button @click="DengXia">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      numbers: 1, //用户选择的数字
      sum: 0, //当前的和
    };
  },
  methods: {
    JiaFa() {
      this.sum += this.numbers;
    },
    JianFa() {
      this.sum = this.sum - this.numbers;
    },
    JiShu() {
      if (this.sum % 2) {
        this.sum = this.sum + this.numbers;
      }
    },
    DengXia() {
      setTimeout(() => {
        this.sum = this.sum + this.numbers;
      }, 500);
    },
  },
};
</script>

<style>
button {
  margin-left: 20px;
}
</style>

输出效果如下

vuex工作原理

vuex由三个重要部分组成，如虚线框中画的，一个是Actions，一个是Mutations，一个是State。state本质是一个object对象，里边有很多东西，我们上边案例的sum值可以保存在这里。在vuecomponents里，即我们上边案例的Count，调一个API，叫Dispatch，是一个函数，调用的时候要传两个参数，一个是动作类型（是加法动作还减法动作），一个是数值（你要加多少？你要减多少？），然后到了Actions中，里边有很多key和value，对于上边案例来说，key：value就是JiaFa：function，function是一个函数，我们调用dispatch传过来的动作是JiaFa时，这就引起function起作用，就把传过来的数值进行接收应用，在这个function函数里边还需要自己去调用一个commit，表达用户要干什么，类似于提交，随后进入mutations，这里边也是key：value的形式，对于上边案例来说就是JiaFa:function的形式，然后此处的function包含了state和传递的数值。最后经过mutate（不用我们自己调用）就把state中的sum值更新了。随后render进行页面的渲染。

搭建vuex开发环境

安装vuex，在命令行窗口输入以下代码

npm i vuex

随后在main.js中进行引入和使用，其中的store是一个仓库核心管理着vuex

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


//引入vuex
import vuex from 'vuex'
//引入store
import store from './store/index'
//使用插件
Vue.use(vuex)
//创建vm
new Vue({
	el: '#app',
	store:store,
	render: h => h(App),

})

随后在src文件夹下新建一个store的文件夹，里边在新建一个index.js的文件。每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

//自建的main.js中代码
//该文件创建vuex中最为核心的store，为了管理vuex工作原理中的actions、mutations、state
//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'

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

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

}

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

//使用插件
Vue.use(Vuex)
//创建store
const store = new Vuex.Store({
    // 传进去一些值，key:value形式
    actions: actions,
    mutations: mutations,
    state: state,
})
//暴露store
export default store

至此，我们的vm实例对象和vue组件实例对象都有了一个$store。

修改案例为vuex版本

第一步得把sum的和放在vuex中的state中管理。第二步调用dispatch，写一些要做的动作和数值，第三步在actions里边，写要执行的动作和数值，第四步在actions中的function函数中还要调用commit。第五步在mutation中写要执行的动作。第六步，自动更新state中的值。
其中自定义组件中的count.vue中的代码如下：

<template>
  <div>
    <h1>当前求和为：{{ this.$store.state.sum }}</h1>
    <select v-model.number="numbers">
      <!-- value前边加冒号，就会被当成js表达式处理，如果不加，value值就是字符串形式 -->
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="JiaFa">+</button>
    <button @click="JianFa">-</button>
    <button @click="JiShu">当前求和为奇数在加</button>
    <button @click="DengXia">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      numbers: 1, //用户选择的数字
    };
  },
  methods: {
    JiaFa() {
      //调用dispatch，因为$store在this指向的组件实例对象vc身上，dispatch又在store身上
      this.$store.dispatch("jia", this.numbers);
    },
    JianFa() {
      this.$store.dispatch("jian", this.numbers);
    },
    JiShu() {
      // if (this.$store.state.sum % 2) {
      //   this.$store.dispatch("jia", this.numbers);
      this.$store.dispatch("jiShu", this.numbers);
      // }
    },
    DengXia() {
      setTimeout(() => {
        this.$store.dispatch("jia", this.numbers);
      }, 500);
    },
  },
};
</script>

<style>
button {
  margin-left: 20px;
}
</style>

自己新建的index.js中的代码如下：

//该文件创建vuex中最为核心的store，为了管理vuex工作原理中的actions、mutations、state
//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'

//准备actions，用于响应组件中的动作
const actions = {
    jia: function (miniStore, value) {
        miniStore.commit('jia', value)
    },
    jian: function (miniStore, value) {
        miniStore.commit('jian', value)
    },
    jiShu: function (miniStore, value) {
        //把判断和为奇数时在进行求和的逻辑写在这actions中
        if (miniStore.state.sum % 2) {
            miniStore.commit('jia', value)
        }
    },
}
//准备mutations，用于操作数据（state）
const mutations = {
    jia(state, value) {
        state.sum += value
    },
    jian(state, value) {
        state.sum -= value
    }
}

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

//使用插件
Vue.use(Vuex)
//创建store
const store = new Vuex.Store({
    // 传进去一些值，key:value形式
    actions: actions,
    mutations: mutations,
    state: state,
})
//暴露store
export default store

最后输出的效果如下

vuex开发者工具

打开vue调试工具，点击红框内的选项，就进入了vuex调试工具。（使用的是Google浏览器）

根据上述案例，我们点击+按钮，就会发现红框中记录了我们的操作，显示jia，这个字符在代码里我们是写在了mutations中的，所以也印证了工作原理图中，开发者工具是监控mutations的说法。

这个按钮类似于时间穿梭，绿色的背景框在哪就意味着页面显示到了哪一步，点击秒表按钮，绿色背景框就会跳转到当前的步骤中。

这个按钮是去除这一步。因为我们的案例是依赖于第一步，每一步都依赖前一步的计算，所以当去除第一步的时候，我们所有的步骤都消失了，只剩下base state（最基础的状态）。

合并当前步骤以及之前的步骤，全部归在base state中，不在单独显示。

总结