vuex3配置，vuex3代码模板，适配vue2版本

vuex3配置，vuex3代码模板，适配vue2版本

前言：

1. 本文章不适合 vue 3 版本，只适合 vue2 版本
2. vuex3 适配 vue2， vuex4 适配 vue3
3. vuex3 原理图
   
   原理图展示的是组件修改存放在vuex中的值，首先先将要（修改的数据名以及修改的数据值）传递到actions对象的方法中actions对象的方法里面可以与后端api连接，也可以处理从组件拿到的value值（数据）做一些数据判断的逻辑，再将这个value值提交到mutations对象里对应的方法里面。
   mutations对象直接对接vuex开发者工具，这里修改的数据能被开发者工具监视到。在mutations对象的方法中，对存放在state对象里面的值直接进行修改，修改的结果会被重新渲染到组件中，这个过程就是「组件修改存放在vuex中的值」的过程。
   值得注意的是，组件也是可以绕过actions对象直接和mutations对象中的方法对话的

安装

npm i vuex@3

配置Vuex的Store

1⃣️ main.js
以下为代码模版

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

Vue.use(Vuex)

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

2⃣️ 在src目录下创建一个目录store

3⃣️ 在store文件夹 📁 里面创建index.js，并参加一个自定义名字的js文件（图里用calculatorOptions.js）为例子，该文件用来封装vuex操作中的几个重要的对象。
calculatorOptions（自定义文件名）.js
以下为代码模版，里面存在的一些方法目的是为了说明功能，直接复制该代码放到文件里，再对代码无关部分进行删除重写即可。

// 该文件用于创建vuex中最为核心的store
export default {
   
    // 开启命名空间，让组件只能通过对应的命名空间访问到对象中的方法
    namespaced:true,
    // 用于响应组件中的动作
    actions: {
   
        add(context, value) {