Vuex 4 学习笔记

最新推荐文章于 2022-10-11 09:31:05 发布
最新推荐文章于 2022-10-11 09:31:05 发布
阅读量110 收藏
点赞数
分类专栏： 前端学习 文章标签： vue.js javascript vue vuex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44717047/article/details/119988288
版权

笔记参考文档：https://next.vuex.vuejs.org/zh/guide/

Vuex

1.什么是vuex

概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.什么时候使用 Vuex

  1. 多个组件依赖于同一状态

  2. 来自不同组件的行为需要变更同一状态

3.Vuex工作原理

vuex

4.vuex安装与导入

yarn add vuex@next 

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp(App)

// 将 store 实例作为插件安装
app.use(store).mount('#app');

单文件来写：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index.js'

createApp(App).use(store).mount('#app');


//store/index.js
import { createStore } from 'vuex'

// 准备actions 用于响应组件中的动作
const actions = {};
// 准备mutations 用于操作数据(state)
const mutations = {};
// 准备state 用于存储数据
const state = {};

// 创建store
const store = createStore({
    actions,
    mutations,
    state(){
        return state;
    }
});

export default store;

5. vuex小案例

  1. 安装，导入vuex，创建store实例。

    //store/index.js
import { createStore } from 'vuex'

// 创建store
const store = createStore({
    actions: {},
    mutations: {},
    state: {}
});

export default store;

    然后在 main.js 中引入导出的 store。

    import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index.js'

createApp(App).use(store).mount('#app');

  2. 在组件中使用store，首先得从 vuex 中导入 useStore。

    import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
};

    这里准备了一个count.vue 组件，目的是实现自定义加减。

    <template>
  <h1>当前求和为 </h1>
  <select name="" id="" v-model.number="n">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button @click="add">+</button>
  <button @click="subtract">-</button>
  <button @click="addOdd">当前求和为奇数才加</button>
  <button @click="addWait">等等再加</button>
</template>

  3. 开始实现功能

    //count.vue
<script>
import { ref,computed } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();

    let n = ref(1);

    function add() {
      // dispatch会触发action函数 第二个参数n.value可以传值
      store.dispatch('add',n.value); // ① dispatch
    }

    // 注意这里sum是通过computed
    return { n, add, sum:computed(()=>{
        return store.state.sum;
    })};
  },
};

    //store/index.js
import { createStore } from 'vuex'

// 创建store
const store = createStore({
    actions: {
        add(context,value){ // ②被触发的action
            context.commit('ADD',value) //③ commit
        }
    },
    mutations: {

        ADD(state,value){ // ④被触发的mutation
            state.sum+=value;
        }
    },
    state: {sum:0}
});

export default store;

  4. 最终加上一个减法的功能，另外“等等再加”和“奇数再加”只需要触发即可，不需要再次额外定义函数了。

    //count.vue
<template>
  <h1>当前求和为{{ sum }}</h1>
  <select name="" id="" v-model.number="n">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button @click="add">+</button>
  <button @click="subtract">-</button>
  <button @click="addOdd">当前求和为奇数才加</button>
  <button @click="addWait">等等再加</button>
</template>

<script>
import { ref, computed } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();

    let n = ref(1);

    function add() {
      // dispatch会触发action函数 第二个参数n.value可以传值
      store.dispatch("add", n.value); // ① dispatch
    }

    function subtract() {
      store.dispatch("subtract", n.value);
    }

    function addOdd() {
      if (store.state.sum % 2) {
        store.dispatch("add", n.value);
      }
    }

    function addWait() {
      setTimeout(() => {
        store.dispatch("add", n.value);
      }, 500);
    }
    // 注意这里sum是通过computed
    return {
      n,
      add,
      subtract,
      addOdd,
      addWait,
      sum: computed(() => {
        return store.state.sum;
      }),
    };
  },
};
</script>

    //store/index.js
import { createStore } from 'vuex'

// 创建store
const store = createStore({
    actions: {
        add(context,value){ // ②被触发的action
            context.commit('ADD',value) //③ commit
        },
        subtract(context,value){
            context.commit('SUBTRACT',value);
        }
    },
    mutations: {

        ADD(state,value){ // ④被触发的mutation
            state.sum+=value;
        },
        SUBTRACT(state,value){
            state.sum-= value;
        }
    },
    state: {sum:0}
});

export default store;

    最终效果：

最终效果

  1. 一点优化：

    add和subtract的action没有任何逻辑，因此可以直接commit触发mutation。

    addOdd和addWait的业务逻辑写在actions中比较合适。

    function add() {
  // dispatch会触发action函数 第二个参数n.value可以传值
  store.commit("ADD", n.value); // ① dispatch
}

function subtract() {
  store.commit("SUBTRACT", n.value);
}

function addOdd() {
  if (store.state.sum % 2) {
    store.dispatch("addOdd", n.value);
  }
}

function addWait() {
  store.dispatch("addWait", n.value);
}

    最后add、addOdd、addWait都是调用ADD的mutation。

    //store/index.js
ctions: {
    // add(context, value) { // ②被触发的action
    //     context.commit('ADD', value) //③ commit
    // },
    // subtract(context, value) {
    //     context.commit('SUBTRACT', value);
    // },
    addOdd(context, value) {
        // 注意这里是 context.state
        if (context.state.sum % 2) {
            context.commit('ADD', value) 
        }
    },
    addWait(context,value){
        setTimeout(() => {
            context.commit('ADD', value) 
        }, 500);
    }
},

    NOTE: 如果setup中不提供sum这个state，页面中也可以直接获取到它。但是通过computed属性来返回，就不用写$store.state 这个前缀了。

    <template>
   <h1>当前求和为{{ $store.state.sum }}</h1>
</template>

6.多组件vuex小案例

//store/index.js
import { createStore } from 'vuex'

// 创建store
const store = createStore({
    actions: {
        addOdd(context, value) {
            // 注意这里是 context.state
            if (context.state.sum % 2) {
                context.commit('ADD', value) //③ commit
            }
        },
        addWait(context, value) {
            setTimeout(() => {
                context.commit('ADD', value)
            }, 500);
        }
    },
    mutations: {

        ADD(state, value) { // ④被触发的mutation
            state.sum += value;
        },
        SUBTRACT(state, value) {
            state.sum -= value;
        },
        ADD_PERSON(state, value) {
            state.peopleList.push(value);
        }
    },
    state: {
        sum: 0,
        peopleList: [
            { id: '001', name: 'alex' }
        ]
    },
    // getters用于加工state中的数据
    getters: {
        sumTimesTen(state) {
            return state.sum * 10;
        }
    }
});

export default store;

//people.vue
<template>
  <h1>人员列表</h1>
  <h3>Count组件的总和 {{sum}}</h3>
  <input type="text" placeholder="请输入名字" v-model="name"/>
  <button @click='addPerson'>添加</button>
  <ul>
    <li v-for='p in peopleList' :key='p.id'>{{p.name}}</li>
  </ul>
</template>

<script>
import {nanoid} from 'nanoid';
export default {
    data(){
        return {name:''}
    },
    computed:{
        peopleList(){
            return this.$store.state.peopleList;
        },
        sum(){
            return this.$store.state.sum;
        }
    },
    methods:{
       addPerson(){
            const person = {id:nanoid(),name:this.name};
            this.$store.commit('ADD_PERSON',person);
       }
    }
};
</script>

<style>
</style>

//count.vue
<template>
  <h1>当前求和为{{ sum }}</h1>
  <h3>当前求和放大10倍{{ sumTimesTen }}</h3>
  <h3>Person组件的总人数是{{ peopleList.length }}</h3>
  <select name="" id="" v-model.number="n">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button @click="add(n)">+</button>
  <button @click="subtract(n)">-</button>
  <button @click="addOdd(n)">当前求和为奇数才加</button>
  <button @click="addWait(n)">等等再加</button>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return { n: 1 };
  },
  computed: {
    ...mapState(["sum", "peopleList"]),
    ...mapGetters(["sumTimesTen"]),
  },
  methods: {
    // 由于需要传参，此时的参数通过模板来传递
    ...mapMutations({
      add: "ADD",
      subtract: "SUBTRACT",
    }),
    ...mapActions(["addOdd", "addWait"]),
  },
};
</script>

<style>
button {
  margin: 5px;
}
</style>

image-20210829215744695

核心概念

mapXXX

mapState

ps：实在无法用组合式api写下去了这个了。

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性。

  1. 对象写法
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 写法一：箭头函数可使代码更简练
    count: state => state.count,

    // 写法二：传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

  })
}
  1. 数组写法

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

**mapState 函数返回的是一个对象。**我们如何将它与局部计算属性混合使用呢？使用从有了对象展开运算符，我们可以极大地简化写法：

computed: {
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

mapGetter

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

mapMutations

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

前面的count小案例，经过改造如下：注意此时的传参是通过模板来传递的。

<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <h3>当前求和放大10倍{{ sumTimesTen }}</h3>
    <h3>姓名：{{ name }} 性别：{{ gender }}</h3>
    <select name="" id="" v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add(n)">+</button>
    <button @click="subtract(n)">-</button>
    <button @click="addOdd">当前求和为奇数才加</button>
    <button @click="addWait">等等再加</button>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import { useStore, mapState,mapGetters ,mapMutations} from "vuex";

export default {
  setup() {
    const store = useStore();

    let n = ref(1);

    function addOdd() {
      if (store.state.sum % 2) {
        store.dispatch("addOdd", n.value);
      }
    }

    function addWait() {
      store.dispatch("addWait", n.value);
    }

    // 注意这里sum是通过computed
    return {
      n,
      addOdd,
      addWait,
    };
  },
  // 用组合式api实在写不下去了
  computed: {
    
    ...mapState(["sum", "name", "gender"]),
    ...mapGetters(['sumTimesTen'])
  },
  methods:{
    /* add(){
      this.$store.commit("ADD", n.value);
    },
    subtract(){
      this.$store.commit('SUBTRACT')
    }, */
    ...mapMutations({
      // 由于需要传参，此时的参数通过模板来传递
      add:'ADD',subtract:'SUBTRACT',
    })
  }
};
</script>

mapActions

你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

前面的小案例最终改造结果：

<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <h3>当前求和放大10倍{{ sumTimesTen }}</h3>
    <h3>姓名：{{ name }} 性别：{{ gender }}</h3>
    <select name="" id="" v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add(n)">+</button>
    <button @click="subtract(n)">-</button>
    <button @click="addOdd(n)">当前求和为奇数才加</button>
    <button @click="addWait(n)">等等再加</button>
  </div>
</template>

<script>
import {mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return { n: 1 };
  },
  computed: {
    ...mapState(["sum", "name", "gender"]),
    ...mapGetters(["sumTimesTen"]),
  },
  methods: {
    // 由于需要传参，此时的参数通过模板来传递
    ...mapMutations({
      add: "ADD",
      subtract: "SUBTRACT",
    }),
    ...mapActions(["addOdd", "addWait"]),
  },
};
</script>

Getter

有时候我们需要从 store 中的 state 中派生出一些状态。

//count.vue
<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <h3>当前求和放大10倍{{ sumTimesTen }}</h3>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    return {
      sum: computed(() => {
        return store.state.sum;
      }),
      sumTimesTen: computed(() => {
        return store.getters.sumTimesTen;
      }),
    };
  },
};
</script>


//store/index.js
import { createStore } from 'vuex'

// 创建store
const store = createStore({
    state: { sum: 0 },
    // getters用于加工state中的数据
    getters:{
        sumTimesTen(state){
            return state.sum*10;
        }
    }
});

export default store;

module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

模块的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。(state仅仅只指自己的state)

const moduleA = {
  state: () => ({
    count: 0
  }),
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

命名空间

默认情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的——这样使得多个模块能够对同一个 action 或 mutation 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

const store = createStore({
  modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },
    }
  }
})

启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit。换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。

在带命名空间的模块内访问全局内容

如果你希望使用全局 state 和 getter，rootState 和 rootGetters 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。

若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。

modules: {
  foo: {
    namespaced: true,

    getters: {
      // 在这个模块的 getter 中，`getters` 被局部化了
      // 你可以使用 getter 的第四个参数来调用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在这个模块中， dispatch 和 commit 也被局部化了
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

带命名空间的绑定函数

当使用 mapState、mapGetters、mapActions 和 mapMutations 这些函数来绑定带命名空间的模块时，写起来可能比较繁琐：

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    'some/nested/module/foo', // -> this['some/nested/module/foo']()
    'some/nested/module/bar' // -> this['some/nested/module/bar']()
  ])
}

对于这种情况，你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。于是上面的例子可以简化为：

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

而且，你可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

module小案例

//store/index.js
import { createStore } from 'vuex';
import countOptions from './count';
import peopleOptions from './people';
// 创建store
const store = createStore({
    modules:{
        countOptions,
        peopleOptions
    }
});

export default store;

// store/people.js
// 人员管理相关的配置
export default {
    namespaced: true,
    actions: {
        addWang(context, value) {
            // 只能添加王姓名
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value);
            } else {
                alert('添加的人必须姓王')
            }
        },

    },
    mutations: {
        ADD_PERSON(state, value) {
            state.peopleList.push(value);
        }
    },
    state: {
        peopleList: [
            { id: '001', name: 'alex' }
        ]
    },
    getters: {
        firstPersonName(state) {
            // 这里的state是 peopleOptions的state
            return state.peopleList[0].name;
        }
    }
}


// store/count.js
// 求和相关的配置
export default {
    namespaced: true,
    actions: {
        addOdd(context, value) {
            // 注意这里是 context.state
            if (context.state.sum % 2) {
                context.commit('ADD', value)
            }
        },
        addWait(context, value) {
            setTimeout(() => {
                context.commit('ADD', value)
            }, 500);
        }
    },
    mutations: {
        ADD(state, value) {
            state.sum += value;
        },
        SUBTRACT(state, value) {
            state.sum -= value;
        },
    },
    state: { sum: 0 },
    getters: {
        sumTimesTen(state) {
            return state.sum * 10;
        }
    }
}

//people.vue
<template>
  <h1>人员列表</h1>
  <h3>Count组件的总和 {{ sum }}</h3>
  <h3>列表中第一个人的名字：{{ firstPersonName }}</h3>
  <input type="text" placeholder="请输入名字" v-model="name" />
  <button @click="addPerson">添加</button>
  <button @click="addWang">添加一个姓王的人</button>
  <ul>
    <li v-for="p in peopleList" :key="p.id">{{ p.name}}</li>
  </ul>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  data() {
    return { name: "" };
  },
  computed: {
    peopleList() {
      // 注意写法
      return this.$store.state.peopleOptions.peopleList;
    },
    sum() {
      return this.$store.state.countOptions.sum;
    },
    firstPersonName() {
      return this.$store.getters["peopleOptions/firstPersonName"];
    },
  },
  methods: {
    addPerson() {
      const person = { id: nanoid(), name: this.name };
      // 注意写法
      this.$store.commit("peopleOptions/ADD_PERSON", person);
      this.name = "";
    },
    addWang() {
      const person = { id: nanoid(), name: this.name };
      console.log(person);
      this.$store.dispatch("peopleOptions/addWang", person);
      this.name = "";
    }
  }

};
</script>

<style>
</style>

//count.vue
<template>
  <h1>当前求和为{{ sum }}</h1>
  <h3>当前求和放大10倍{{ sumTimesTen }}</h3>
  <h3>Person组件的总人数是{{ peopleList.length }}</h3>
  <select name="" id="" v-model.number="n">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button @click="add(n)">+</button>
  <button @click="subtract(n)">-</button>
  <button @click="addOdd(n)">当前求和为奇数才加</button>
  <button @click="addWait(n)">等等再加</button>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return { n: 1 };
  },
  computed: {
    ...mapState("countOptions", ["sum"]),
    ...mapState({peopleList:state => state.peopleOptions.peopleList}),
    ...mapGetters("countOptions", ["sumTimesTen"]),
  },
  methods: {
    // 由于需要传参，此时的参数通过模板来传递
    ...mapMutations("countOptions", {
      add: "ADD",
      subtract: "SUBTRACT",
    }),
    ...mapActions("countOptions", ["addOdd", "addWait"]),
  },
  
};
</script>
~，555555
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex个人学习笔记代码
04-16
vuex个人学习笔记代码
vuex学习
qq_50280292的博客
12-01 257
vuex
Vue笔记（五）vuex
Tml的博客
10-11 2950
概念、搭建环境、基本使用（举例）、getters、四个map方法、模块化和命名空间
Vuex 命名空间 namespaced 介绍
热门推荐
扛麻袋的少年的博客
04-18 4万+
接上篇：12.组件中调用Vuex的state，getters，mutations，actions，modules的数据传递、传参问题 Vuex由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 因此，Vuex 允许我们将 store 分割成模块（module），每个模块拥有自己的 state、m...
Vue3和Vue2使用Vuex的区别（使用ts获取更佳体验）
幻日のヨハネ
12-23 2728
两者核心区别就是类型提示，像定义组件需要 defineComponent 同出一辙： Vue3 import { createStore } from "vuex"; import example from './modules/example' export default createStore({ state: {}, mutations: {}, actions: {}, modules: { example } }) Vue2 import Vue from "vue"; i
vuex模块中使用namespaced之后的引用方法
VVVZCS的博客
11-15 1万+
store-&gt;index.js export default new Vuex.Store({   state,   mutations,   actions,   modules: {     user   } })   user.js const state = {   userName: 'ReSword' } const mutations = {   // } const a...
关于vuex的学习实践笔记
12-12
Vuex 简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 例如(travel store)： import * as types from ...
这是另一篇关于vuex的学习笔记.docx
11-24
这是另一篇关于vuex的学习笔记.docx
用Vuex构建一个笔记应用
02-24
在这个教程里面，我们会通过构建一个笔记应用来学习怎么用Vuex。我会简单地介绍一下Vuex的基础内容，什么时候该用它以及用Vuex的时候该怎么组织代码，然后我会一步一步地把这些概念应用到这个笔记应用里面。这个是...
Vue Vuex学习(vuex模块化+命名空间namespace)
Errol's Blog
04-14 1611
文章目录Count.vue 分组修改Person.vue 分组修改继续优化，分成文件引入actions联系后端api练习模块化+命名空间总结 没有看过上一篇的同学可以查看： Vue Vuex学习(vuex配置项、多组件数据共享案例) Count.vue 分组修改 index.js 分组先用起来 我们观察 index.js，mutations 中有 JIA、JIAN、ADD_PERSON，也就是既有计算模块 Count 的方法，也有人员模块 Person 的方法。如果以后模块多了都写在这里，不便于管理。其他的
前端微服务化解决方案
幽灵 逐梦--专栏
05-18 1988
作者：Alili前端大暴炸的前端微服务化解决方案系列 链接：https://www.jianshu.com/u/2aa7a9ad33ad 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 近几年,微服务架构在后端技术社区大红大紫,它被认为是IT软件架构的未来技术方向.我们如何借鉴后端微服务的思想来构建一个现代化前端应用? 在这里我提供一个可以在产品中真正可以落地的前端微服务解决方案. 微服务化后端前后端对比 后端微服务化的优势: 复杂度可控: 体积小、复杂度低，每
Vue笔记05-Vuex
王劭阳的博客
08-14 175
Vuex概念 Vuex是在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），可以实现组件间通信，适用于任意组件间通信。 当多个组件依赖同一状态、不同组件行为需要变更同一状态的时候，需要使用Vuex，也就是用Vuex来管理公共的变量或者数据。 案例 首先引出一个案例，这个案例是单组件，不使用Vuex来完成的。 有一个Count.vue组件，组件中有几个按钮和一个显示当前数据的区域，通过按钮修改当前值并重新显示。 在App.vue中引入Count..
Vue3.0中如何使用Vuex
m0_59006402的博客
07-15 1835
首先呢,这个是vuex是如何定义的,在vue2.0中,我们是这样定义的 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ ......... }) 下面这段代码是vuex在vue3.0中是怎么定义的,来对比一下不同吧! import { createStore } from 'vuex' export default createStore({ state.
Vue 3使用vite 2.0 动态引入加载图片 :src，解决方法超级简单
weixin_44717047的博客
08-21 3万+
Vue 3使用vite 2.0 动态引入图片 :src
使用vite 打包后的代码，如何在本地运行？
weixin_44717047的博客
08-07 1万+
在终端输入 npm run build 即可打包。 可以在dist目录下，看到打包后的文件。 但是如果直接打开html文件，会发现无法运行。 因此可以 在终端输入 npm install -g serve ，安装服务器环境。 接着输入serve -s dist，单击打开http://localhost:5000/即可运行代码。 ...
使用VUE 实现图书管理系统 | 简版
weixin_44717047的博客
07-03 6992
使用VUE 实现图书管理系统 | 简版 可以进行图书增加、删除、修改
JavaScript日期格式化 toLocaleString 中文本地时间最简单的方法
weixin_44717047的博客
09-07 5274
JavaScript日期格式化 中文本地时间最简单的方法
3种方法实现JS对象深拷贝
weixin_44717047的博客
01-08 4632
相信大家总是在各大博客中看到手写深拷贝这类题目，今天就分享3种方法实现它。 什么是深拷贝？ let a = { name: 'jiaqi', age: 100 }; let b = a; 我们知道对象是引用类型，它的值是地址，这个地址指向了堆中真正的数据。 如果直接将对象a赋值给b(b=a)，此时a和b就会引用同样的数据。如果b修改某个属性，则也会修改a中属性。 b.name = '嘉琪'； console.log(a.name); //嘉琪 因此，如果想要实现两个对象互不影响（深拷贝），就得逐一复制它
TypeScript 函数重载
weixin_44717047的博客
03-24 4011
函数重载 如果想要TypeScript实现一个加法函数，它可以实现字符串的拼接和数字相加。 当然，用JS实现非常简单，因为JS不关心你的类型，但是用TS实现就稍微复杂一点了。 法一：利用联合类型+类型判断 function add(num1: string | number, num2: string | number) { if (typeof num1 === 'number' && typeof num2 === 'number') { return num1
尚硅谷vue学习笔记
最新发布
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、指令等。 2. 组件化开发：学习如何创建和使用Vue组件，掌握组件之间的通信方式，包括props和事件。 3. 路由管理：学习使用Vue Router实现前端路由，实现单页应用的页面跳转和导航。 4. 状态管理：掌握Vuex的使用，实现全局状态管理和数据共享。 5. 表单处理：学习如何使用Vue表单指令和表单验证，处理用户输入和表单提交。 6. HTTP请求：了解Vue中常用的HTTP库，如axios，进行数据的异步请求和处理。 7. 生命周期：理解Vue生命周期钩子函数的执行顺序和作用，掌握组件的生命周期管理。 8. Vue3新特性：了解Vue3的新特性，如Composition API、Teleport、Fragments等。 尚硅谷还提供了一些实战项目，如电商平台、博客系统等，可以通过完成这些项目来巩固所学的知识。 以上是一些关于尚硅谷Vue学习笔记的要点，希望对你有所帮助！如果有更具体的问题，欢迎继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值