vue vuex（数据共享）

 map

一、概念

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

二、vuex工作原理图：

dispatch mutate render commit 发送 改变 渲染 提交
vuex 可以在开发者工具探测到

三、vuex使用

1.安装包

npm i vuex

2.在src下创建文件夹及文件 store/index.js
 在main.js 导入 store

3.在上提到的文件加入代码
 --粗稿

import Vue from 'vue';
// 导入并使用 vuex
import VueX from 'vuex';
Vue.use(VueX)

// 业务逻辑层--响应组件的动作
const actions = {
    // 在vue组件文件中使用：this.$store.dispatch("jian",this.value)
    jian(context, value) {
        if (value >= 0) {
            setTimeout(() => { context.commit('JIAN', value) }, 200)
        }
    }
}
// 数据访问层--操作数据 （字母对应大写，多单词用下划线）
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },
    ADD_List(state, p) {
        state.personList.unshift(p);
    }
}
// 数据层
const state = {
    sum: 0,
    school: '东咚',
    subject: 'web前端',
    personList: [
        { id: '01', name: '张三', age: 18 },
        { id: '02', name: '张四', age: 20 },
    ]
}
// getters
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

export default new VueX.Store({
    actions,
    mutations,
    state,
    getters
})

 --细稿（模块化）
按照组件或作用将不同的 actions, mutations, state, getters 放入不同的 js文件

import Vue from 'vue';
import VueX from 'vuex';
Vue.use(VueX)

// CountOption和PersonOption 应该包装成 js文件再 import
const CountOption = {
    namespaced:true, // 配合 ...map
    actions: {
        jian(context, value) {
            if (value >= 0) {
                setTimeout(() => { context.commit('JIAN', value) }, 200)
            }
        }
    },
    mutations: {
        JIA(state, value) {
            state.sum += value
        },
        JIAN(state, value) {
            state.sum -= value
        },
    },
    state: {
        sum: 0,
        school: '东咚',
        subject: 'web前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    },
}
const PersonOption = {
    namespaced:true,
    actions: {},
    mutations: {
        ADD_List(state, p) {
            state.personList.unshift(p);
        }
    },
    state: {
        personList: [
            { id: '01', name: '张三', age: 18 },
            { id: '02', name: '张四', age: 20 },
        ]
    },
    getters: {},
}

export default new VueX.Store({
    modules: {
        CountOption,
        PersonOption
    }
})

4.map方法
  4.1 非map方法：直接 dispatch 或者 commit

// 路径要写明，nanoid 是生成唯一id的包
const p = { id: nanoid(), name: this.name, age: 18 };
this.$store.commit("PersonOption/ADD_List", p);

  4.2 四种map方法（两个计算属性，两个函数）
先导入：import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
namespaced:true 若是非模块化，...map 不用传名字（如：CountOption）

// vueComponent
computed: {
  // ...mapState("CountOption", { sum: "sum", school: "school", subject: "subject" }), // 对象写法
  ...mapState("CountOption", ["sum", "school", "subject"]), // 名字相同可以简写成 数组
  ...mapGetters("CountOption", ["bigSum"]),
  ...mapState("PersonOption", ["personList"]),
},
methods: {
  // template <button @click="increment(n);clicks();">button</button> 这里传参了哦
  // 这两个如果要用数组简写，需要把index.js的JIA,jian改名，或者上面@click事件increment(n)改名 JIA(n)
  ...mapMutations("CountOption", { increment: "JIA" }), // 对应 commit
  ...mapActions("CountOption", { decrement: "jian" }), // 对应 dispatch

  clicks() {
    console.log("多个点击事件被触发");
  }
},