vuex简单使用模板，一分钟快速上手，新手入门

最新推荐文章于 2024-08-13 15:00:04 发布

Cenmen_17714

最新推荐文章于 2024-08-13 15:00:04 发布

阅读量1.1k

点赞数 2

分类专栏： VUE 文章标签： vuex 模板直接上手

本文链接：https://blog.csdn.net/Cenmen_17714/article/details/83714192

版权

这篇博客提供了一个经过整理的Vuex使用模板，适合新手快速上手。包含testPage_1.vue、testPage_2.vue和testPage_3.vue三个页面，分别展示了直接访问store、模块化及map辅助函数的用法。同时，详细介绍了store中的index.js状态管理配置。

摘要由CSDN通过智能技术生成

经过我自己整理过后的vuex的使用模板：https://github.com/cenmen/vuex-store-typical-demo.git

项目主要文件有：testPage_1.vue，testPage_2.vue，testPage_3.vue，store中的index.js

testPage_1.vue：使用最直接的方法访问store

testPage_2.vue：modules 模块化以及组件中引入 mapGetters、mapActions 和 mapStates的使用

testPage_3.vue：使用map辅助函数的方法访问store

index.js：状态管理

下面直接贴出代码：

testPage_1.vue：

<template>
  <div class="testPage_1">
    <h1>welcome to testPage_1</h1>
    <h1>'使用最直接的方法访问store'</h1>
    <h1>this.$store.state.count: {
  {this.$store.state.count}}</h1> <!-- 直接用state访问状态 -->
    <h1>getCount: {
  {getCount}}</h1>
    <!-- <h1>{
  {this.$store.getters.getCount}}</h1> -->
    <h1>getDoneTodos: {
  {getDoneTodos}}</h1>
    <h1>text in getTodoById: {
  {getTodoById.text}}</h1>
    <button @click="addCount">+1</button>
    <input v-model="number"><button @click="addNumCount(number)">+n</button>
    <h1>number : {
  {number}}</h1>


  </div>
</template>

<script>
export default {
  name: 'testPage_1',
  data () {
    return {
      number:21,
    }
  },
  computed:{
     getCount(){