vuex(状态机)

• 使用场景
  • 项目中有些数据，需要跨组件、同步、共享某些数据的时候，可以采用 Vuex
  • 如果某个数据，只在某一个组件中使用，只需要在组件中直接定义 data、ref() 数据

使用

• 安装 npm i vuex
• 定义状态机对象 store/index.js

import { createStore } from "vuex"
const store = createStore({

}）

• 注入 main.js

import store from './store'
app.use(store)

• 使用

vuex 的核心方法（五个）

state

• 用来定义状态机数据包，与data的写法相似
• 必须在组件 computed 中提取数据

this.$store.state.数据名
this.$store.state.模块名.数据名    //拆分模块后，提取数据

mutations

• 负责修改 state 的方法集，与computed相似
• 在组件的 methods 中触发

this.$store.commit('mutation名称',可选数据包)
this.$store.commit('模块名/mutation名称',可选数据包)  //拆分模块后，并开启namespaced后，触发mutations

getters

• 负责对 state 进行处理，并返回处理后的新数据
• 必须在组件 computed 中提取数据

this.$store.getters.数据名
this.$store.getters['模块名/数据名']  //拆分模块后，并开启namespaced后，获取getters

actions

• 在状态机中发异步请求

this.$store.dispatch('actions名称',可选数据)
this.$store.dispatch('模块名/actions名称',可选数据)  //拆分模块后，并开启namespaced后，触发actions

modules

拆分后， 默认情况下，state 变成了模块的局部数据，getters、mutations、actions 依旧是全局 为模块开启 namespaced 后，state、getters、mutations、actions 全部变为局部

• 如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。

辅助函数(了解)

mapState 在组件中提取 state 数据的辅助函数

原理分析
// list() {
//   return this.$store.state.banner.tableData;
// },
// num(){
//   return this.$store.state.count.num
// },

// 等价于
...mapState({  //拓展运算符，会将mapState返回的对象展开
   list: (state) => state.banner.tableData,
   num: (state) => state.count.num,
}),

• 原理

function mapState(options){
   let obj = {}
   let state = this.$store.state
   for(let attr in options){
      obj[attr] = (state)=>{
         return options[attr](state)
      }
   }
   return obj
   <!-- return {
      list() {
         return this.$store.state.banner.tableData;
      },
      num(){
        return this.$store.state.count.num
      },
   } -->
}

mapGetters

mapMutations

• 原理

import store from "../store";
export const myMapMutations = (options) => {
  let obj = {};
  for (let attr in options) {
    obj[attr] = () => {
      store.commit(options[attr]);
    };
  }
  return obj;
};

mapActions 的使用