vuexvue2安装 npm i vue@3 新建store文件夹在index.vue中：在main.js中引入sto

vue2安装 npm i vue@3

//在main.js中：
import vuex from 'vuex'  // 引入vuex
Vue.use(vuex)  //使用

新建store文件夹在index.vue中：

//store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  // 1. 储存公共数据（变量）的地方 => 类比vue文件中的data ()的返回值
  state: {

  },
  // 2. 是state中定义数据的计算属性 => 类比computed
  getters: {
  },
  // 3. 外界只可读取state中的属性，不可直接进行修改，但是可以通过mutations中定义的方法来修改state中的属性
  // => 类比与methods中的方法， 使用逻辑与refs来调用子组件方法一致
  mutations: {
 
  },
  // 4. 在vuex中的mutations里的方法不允许进行任何的异步操作，如果修改逻辑涉及到异步操作时，现在actions中执行完异步步骤，再让mutations进行state的值的修改
  // 翻译翻译： actions中执行异步操作，mutations中执行赋值操作
  actions: {
  },
  // 5. 模块化vuex，一个状态管理器中可能有很多类 state mutations actions getters，那么没必要在一个文件中写完所有的内容，可以分不同的模块来写相应的方法和数据，最后在modules里面统一整合
  modules: {
  }
})

在main.js中引入store

import store from './store';
new Vue({
  store,
}).$mount('#app')

总结：

(一) 全局数据状态存储的位置 state 使用方式：

this.$store.state.属性名
通过组件的计算属性computed 进行导入和使用 computed: { ...mapState(['属性名']) }
mapState 辅助函数能后省去 this.$store.state 这一繁琐的前缀 methods: { ...mapState('属性名') }

(二) 修改state数据的同步方法 mutations 使用方式：

this.$store.commit('方法名', 需要传递的值)
mapMutations 辅助函数，在methods: { ...mapMutations(['方法名']) }

(三) 处理异步事件，并传达数据给mutations actions

this.$store.dispatch('方法名', 需要传递的值)
mapActions 辅助函数，在methods: { ...mapActions(['方法名']) }

(四) state的计算属性，将不同模块中的state在此统一导出 getters

this.$store.getters.计算属性名
mapGetters 辅助函数，在computed: { ...mapGetters(['计算属性名']) }

(五) 模块，将零散的数据和方法根据用途进行分类 modules 关于模块内容的写法： modules: { 模块名称: { state: {}, mutations: {}, actions: {}, getters: {} } }

获取模块中的数据 this.$store.state.模块名称.属性名
简化获取模块中数据的方式在全局的getters中通过 属性名: state => state.模块名称.属性名 来简化获取时的写法获取形式：this.$store.getters.属性名
在通常情况下，所有的模块中的方法都会暴露在全局中，使用最常用的请求方式 .commit .dispatch 就可以直接调用问题：每个模块中都可能有同一个名称的方法，这样大家都暴露在全局时会引起冲突，所以为了提高各模块的方法私有性，可以为每个模块添加一个属性 namespaced: true 让每个模块方法独立
当各模块独立时，调用方法的方式发生了变化

4.1 this.$store.commit('模块名称/方法名', 需要传递的参数)

4.2 通过mapMutations辅助函数来设置简化方法 ...mapMutations(['模块名称/方法名'])
    使用时不可以写在行内
    在js中通过 this['模块名称/方法名'](需要传递的参数)调用
4.3 通过 createNamespacedHelpers` 辅助函数， 通过它能创建某个模块中的某类辅助函数
  引入 createNamespacedHelpers` 辅助函数
  通过解构赋值的形式来引出特定模块的辅助函数 
  如： const { mapActions: userMapActions } = createNamespacedHelpers('user')
  在 methods 中使用 ...userMapActions(['模块中的方法名'])