>[success] # Option Api -- vuex 1. 可以通过 获取`this.$store` 来进行调用里面提供数据对象 * **state**-- 保存数据状态 * **mutations** -- 对`state `中的数据更改都是通过`mutations`中的方法操控，`Vuex `不提倡直接更改`state`中的数据 * **getters** -- 当我们要获取`state`中的方法的时候从`getter`中取值 * **Action** -- 异步获取请求参数赋值，他会操控`mutations`,再让`mutations`给`state`赋值 * **module**-- store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块 >[info] ## 综合案例 1. 正常使用是通过`this.$store` 去调用对应模块中取出数据 2. `vuex `也提供一些便捷方法**mapGetters, mapState, mapMutations, mapActions** * 注册 ~~~ // 创建vuex import { createStore } from "vuex"; const store = createStore({ state: () => { return { name: "wwww", age: 12, friends: [ { id: 111, name: "a", age: 20 }, { id: 112, name: "b", age: 30 }, { id: 113, name: "c", age: 25 }, ], }; }, getters: { // 第一个参数当前state getName(state) { return state.name; }, // 第一个参数当前state 第二个参数是getters getInfo(state, getters) { return state.age + getters.getName; }, // 通过返回一个函数达到 让 getter 可以接收参数 getFriendById(state) { return function (id) { const friend = state.friends.find((item) => item.id === id); return friend; }; }, }, mutations: { // 第一个参数 state ,第二个参数调用传入的值 changeName(state, payload) { state.name = payload; }, }, actions: { /** 处理函数总是接受 context 作为第一个参数，context 对象包含以下属性 * state, // 等同于 `store.state`，若在模块中则为局部状态 * rootState, // 等同于 `store.state`，只存在于模块中 * commit, // 等同于 `store.commit` * dispatch, // 等同于 `store.dispatch` * getters, // 等同于 `store.getters` * rootGetters // 等同于 `store.getters`，只存在于模块中 */ incrementAction(context, payload) { // console.log(context.commit) // 用于提交mutation // console.log(context.getters) // getters // console.log(context.state) // state context.commit("changeName", payload); }, }, }); export default store; ~~~ * 使用 ~~~html <template> <div>{{ getName }} -- {{ getInfo }} -- {{ getFriendById(111) }}</div> <div>{{ cgetName }}</div> <button @click="mutations">触发mutations</button> <button @click="changeName('语法糖')">触发mutations 语法糖</button> <button @click="actions">Actions</button> <button @click="incrementAction('Actions')">触发Actions 语法糖</button> </template> <script> import { mapGetters, mapState, mapMutations, mapActions } from "vuex"; export default { computed: { ...mapState([ // 映射 this.name 为 store.state.name "name", ]), ...mapState({ age: (state) => state.age, nameAlias: "name", //传字符串参数 'nameAlias' 等同于 `state => state.name` }), //---------------分割线 ------------ ...mapGetters(["getName", "getInfo"]), ...mapGetters(["getFriendById"]), ...mapGetters({ // 把 `this.zgetName` 映射为 `this.$store.getters.getName` zgetName: "getName", }), cgetName() { return this.$store.getters.getName; }, }, methods: { mutations() { this.$store.commit("changeName", "新名字"); }, ...mapMutations(["changeName"]), // `this.changeName(amount)` 映射为 `this.$store.commit('changeName', amount)` //---------------分割线 ------------ actions() { this.$store.dispatch("incrementAction", "actions"); }, ...mapActions(["incrementAction"]), // `this.incrementAction(amount)` 映射为 `this.$store.dispatch('incrementAction', amount)` }, }; </script> ~~~