Vue-Vuex(3.x)

原创 已于 2025-06-09 13:14:36 修改 · 1.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2023-01-29 20:57:53 首次发布

前言

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库

官网介绍：https://vuex.vuejs.org/zh/

以下主要讲解的是如何定义与使用，如果还没有对vuex进行了解的话，请先查看官网，了解其功能、用法及用途。

关于vuex，在之前：https://blog.youkuaiyun.com/qq_57404736/article/details/124471345的第十章，讲解vue的时候，讲过。本章将详细讲解vuex的使用

安装

如果你有一个测试项目，则可以不看使用章节->基本准备->第一章重新创建测试项目，使用如下命令，在你的测试项目安装vuex依赖即可

1、安装依赖包

npm install vuex --save

# 或

cnpm install vuex --save

2、创建基本文件

在src目录下，创建store目录，然后在里面创建index.js文件用于引入vuex

在这里插入图片描述

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
});

3、导入vuex

在main.js中导入刚刚创建好的store下index文件，并挂在到Vue示例上

import Vue from "vue";
import App from "./App.vue";
import store from "./store"; // 导入store下index.js暴露的的Store

Vue.config.productionTip = false;

new Vue({
  store, // 挂在到vue实例上
  render: (h) => h(App),
}).$mount("#app");

使用

以下进行举例使用讲解

使用两个组件，对同一个值(count)进行加减操作

State、Getter、Mutations、Action在页面中使用皆有两种使用方式，请认真观看

0、基本准备

0.1、使用脚手架创建项目

  1. 使用vue ui的命令，创建一个包含vuex组件的基本vue项目。如果不知道vue ui怎么使用的话，可以查看:https://blog.youkuaiyun.com/qq_57404736/article/details/124471345第八章节，下载vue-cli脚手架

  2. 创建的时候选择手动版本，手动导入需要的功能

    在这里插入图片描述

  3. 然后选择vuex，点击右侧按钮打开

    在这里插入图片描述

  4. 然后选择基本配置后，创建项目

    在这里插入图片描述

  5. 等待项目创建完成

0.2、编写基本代码

我们演示的是两个组件实现对count进行加减的计数器功能。这样两个组件就会共享数据count，并对其值进行操作

  1. 先清空components目录下所有案例组件，然后新建addtation、subtraction两个组件，分别针对count进行加减操作

    在这里插入图片描述

    • addtation

      <template>
  <div>
    <h2>当前count值：</h2>
    <button>+1</button>
  </div>
</template>

<script>
  export default {
    methods:{
      
    }
  }
</script>

    • subtraction

      <template>
  <div>
    <h2>当前count值：</h2>
    <button>-1</button>
  </div>
</template>

<script>
  export default {
    methods:{
      
    }
  }
</script>

  2. 然后在App.vue页面里引入这两个组件，进行展示

    <template>
  <div id="app">
    <addition></addition>
    <subtraction></subtraction>
  </div>
</template>
<script>
import addition from "./components/addition.vue";
import subtraction from "./components/subtraction.vue";

export default {
  name: "App",
  components: {
    addition,
    subtraction,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  3. 准备完毕后，启动项目，查看页面是否正常显示

    在这里插入图片描述

1、State

State和组件中的data属性功能基本相同，区别是，State中定义的变量称为状态，且所有组件都可访问到

存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，例如状态对象必须是纯粹 (plain) 的。

1.1、定义

  1. 在左侧store目录中，存放的为vuex中所有的内容，打开index.js文件，里面可以定义所有使用到的变量及方法

    在这里插入图片描述

  2. 其中，state，即是要共享的变量存放的位置。

  3. 我们在state对象内，定义变量count，默认值为0

    import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
});

1.2、使用方法一(直接)

Vuex 通过 Vue 的插件系统将 store 实例从根组件中“注入”到所有的子组件里。且子组件能通过 this.$store 访问到。

我们在addition组件内，使用方法一引入，使其正常显示值。

语法

this.$store.state.全局数据名称

使用

<template>
  <div>
      <!-- 在dom中使用js，this可以省略 -->
    <h2>当前count值：{{$store.state.count}}</h2>
    <button>+1</button>
  </div>
</template>

<script>
  export default {
    data(){
      return {

      }
    },
    methods:{

    }
  }
</script>

结果

在这里插入图片描述

1.3、使用方法二(引入)

vuex中提供了mapState函数，参数为数组，数组中的内容即为需要导出的变量

我们在subtraction组件内，使用方法二引入，使其正常显示值。

语法

// 1. 从vuex中按需导入 mapState 函数
import { mapState } from 'vuex'
// 2. 将全局数据，映射为当前组件的计算属性
computed: {
    ...mapState(['count'])
}

使用

<template>
  <div>
    <h2>当前count值：{{count}}</h2>
    <button>-1</button>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    computed:{
      ...mapState(['count'])
    },
  }
</script>

结果

在这里插入图片描述

2、Getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）

假设我们这个count代表的为年龄，不能为0(后面我们定义方法的时候，会有个-1操作，我们需要对这个值进行判断)

其他办法

我们可以在使用的组件中定义计算属性，进行过滤操作。但是如果使用的组件多的话，则需要每个组件都引入相同的计算属性，十分没必要

代码

<template>
  <div>
    <h2>当前count值：{{count}}</h2>
    <h2>当前sex值：{{sex}}</h2>
    <button>-1</button>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    computed:{
      ...mapState(['count']),
      sex:function(){ // 定义sex属性
        if(this.$store.state.count < 1){
          return 1 // 如果state中的count值小于1，则返回1
        }
        return this.$store.state.count
      }
    },
    methods:{
      
    }
  }
</script>

结果

在这里插入图片描述

1.1、定义

  1. 在store目录下的index.js中的getters中，定义我们需要针对state中的变量，进行计算的属性

  2. 如果count小于1，则默认为1，并返回一个名为sex的变量

    import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
    sex(state){
      if(state.count < 1){
        return 1
      }
      return state.count
    }
  },
  mutations: {},
  actions: {},
  modules: {},
});

1.2、使用方法一(直接)

语法

this.$store.getters.变量名称

使用

<template>
  <div>
    <h2>当前count值：{{$store.state.count}}</h2>
      <!-- Getter属性 -->
    <h2>当前sex值：{{$store.getters.sex}}</h2>
    <button>+1</button>
  </div>
</template>

结果

在这里插入图片描述

1.3、使用方法二(引入)

语法

// 1. 从vuex中按需导入 mapGetters 函数
import { mapGetters } from 'vuex'
// 2. 将Getter里面的属性，映射为当前组件的计算属性
computed: {
    ...mapGetters(['sex'])
}

使用

<template>
  <div>
    <h2>当前count值：{{ count }}</h2>
    <h2>当前sex值：{{ sex }}</h2>
    <button>-1</button>
  </div>
</template>

<script>
  import { mapState,mapGetters } from 'vuex';
  export default {
    computed:{
      ...mapState(['count']),
      ...mapGetters(['sex'])
    },
  }
</script>

结果

在这里插入图片描述

3、Mutations

想要修改状态(count)的值，虽然在使用上，通过this.$store.state.count++修改值，并不会不会报错，并且可以修改成功。

但是，官方并不建议直接修改值，而是在Mutations中定义修改状态的方法，然后执行this.$store.commit('方法名')，调用方法修改状态的值。

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

1.1、定义

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {},
  mutations: {
    // 无参
    addCount(state){
      state.count++;
    },
      
    // 有参
    addCountNum(state,num){
      state.count += num;
    },
      
    // 无参
    subCount(state){
      state.count--;
    },
      
    // 有参
    subCountNum(state,num){
      state.count -= num;
    }
  },
  actions: {},
  modules: {},
});

1.2、使用方法一(直接)

(1)、无参

语法

this.$store.commit('方法名');

使用

<template>
  <div>
    <h2>当前count值：{{$store.state.count}}</h2>
    <button @click="addition">+1</button>
  </div>
</template>

<script>
  export default {
    methods:{
      addition(){
        this.$store.commit('addCount');
      }
    }
  }
</script>

结果

在这里插入图片描述

(2)、有参

指定每次点击后，count值添加5

语法

this.$store.commit('方法名','参数1','参数2',...)

使用

<template>
  <div>
    <h2>当前count值：{{$store.state.count}}</h2>
    <button @click="addition">+1</button>
    <button @click="additionNum">+5</button>
  </div>
</template>

<script>
  export default {
    methods:{
      addition(){
        this.$store.commit('addCount');
      },
      additionNum(){
        this.$store.commit('addCountNum',5);
      }
    }
  }
</script>

结果

在这里插入图片描述

1.3、使用方法二(引入)

语法

<button @click="subCount">-1</button>
<button @click="subCountNum(5)">-5</button>

<script>
    // 1. 从vuex中按需导入 mapMutations 函数
    import { mapMutations } from 'vuex'
    // 2. 将Mutations中的方法，映射为当前组件的方法
    methods: {
        ...mapMutations(['subCount','subCountNum'])
    }
</script>

使用

<template>
  <div>
    <h2>当前count值：{{ count }}</h2>
    <button @click="subCount">-1</button>
    <button @click="subCountNum(5)">-5</button>
  </div>
</template>

<script>
  import { mapState,mapGetters,mapMutations } from 'vuex';
  export default {
    computed:{
      ...mapState(['count']),
    },
    methods:{
      ...mapMutations(['subCount','subCountNum'])
    }
  }
</script>

结果

在这里插入图片描述

1.4、注意

mutation 必须是同步函数，如果你要使用异步函数，则在后面章节的Action中可以看到使用方法。

虽然在mutation中执行异步函数，依旧会修改状态的值，但是在devtools中不能很好的观察到属性正确的值，非常不建议！！！

devtools工具我们会在第七章讲解到。

在这里插入图片描述

在这里插入图片描述

4、Mytations-type

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然。

我们可以使用 ES2015 风格的计算属性命名功能，来使用一个常量作为函数名

4.1、编写mutation-type.js文件

在store目录下，新建mutation-type.js文件，定义是所有的方法名称

export default {
  ADD_COUNT: 'addCount',
  ADD_COUNT_NUM: 'addCountNum',
  SUB_COUNT: 'subCount',
  SUB_COUNT_NUM: 'subCountNum',
  /// ...
}

4.2、引入使用

在store->index.js文件里面引入mutation-type.js文件，并在定义方法的时候使用。

import Vue from "vue";
import Vuex from "vuex";
import MUTATION_TYPE from "./mutation-type";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {},
  mutations: {
    [MUTATION_TYPE.ADD_COUNT](state){
      state.count++;
    },
    [MUTATION_TYPE.ADD_COUNT_NUM](state,num){
      state.count += num;
    },
    [MUTATION_TYPE.SUB_COUNT](state){
      state.count--;
    },
    [MUTATION_TYPE.SUB_COUNT_NUM](state,num){
      state.count -= num;
    }
  },
  actions: {},
  modules: {},
});

5、Action

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。

异步修改状态的步骤：定义state -> 在mutations中编写方法修改state -> 在actions中编写异步方法调用mutations中的方法

1.1、定义

import Vue from "vue";
import Vuex from "vuex";
import MUTATION_TYPE from "./mutation-type";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {},
  mutations: {
    [MUTATION_TYPE.ADD_COUNT](state){
      state.count++;
    },
    [MUTATION_TYPE.ADD_COUNT_NUM](state,num){
      state.count += num;
    },
    [MUTATION_TYPE.SUB_COUNT](state){
      state.count--;
    },
    [MUTATION_TYPE.SUB_COUNT_NUM](state,num){
      state.count -= num;
    },
  },
  actions: {
    delayedAddCount(context){
      // 异步方法
      setTimeout(() => {
        context.commit(MUTATION_TYPE.ADD_COUNT);
      }, 1000);
    },
    delayedSubCount(context){
      // 异步方法
      setTimeout(() => {
        context.commit(MUTATION_TYPE.SUB_COUNT);
      }, 1000);
    }
  },
  modules: {},
});

1.2、使用方法一(直接)

有参使用方法和Mutations中的有参方法使用一致，直接在dispatch参数后面添加其他方法参数即可

语法

this.$store.dispatch('方法名',参数1,参数2,...)

使用

<template>
  <div>
    <h2>当前count值：{{$store.state.count}}</h2>
    <button @click="addition">+1</button>
    <button @click="additionNum">+5</button>
    <button @click="delayedAddCount">延迟+1</button>
  </div>
</template>

<script>
  export default {
    methods:{
      addition(){
        this.$store.commit('addCount');
      },
      additionNum(){
        this.$store.commit('addCountNum',5);
      },
      delayedAddCount(){
        this.$store.dispatch('delayedAddCount')
      }
    }
  }
</script>

结果

在这里插入图片描述

1.3、使用方法二(引入)

语法

<button @click="subCount">-1</button>
<button @click="subCountNum(5)">-5</button>

<script>
    // 1. 从vuex中按需导入 mapActions 函数
    import { mapActions } from 'vuex'
    // 2. 将Actions中的方法，映射为当前组件的方法
    methods: {
        ...mapActions(['subCount','subCountNum'])
    }
</script>

使用

<template>
  <div>
    <h2>当前count值：{{ count }}</h2>
    <button @click="subCount">-1</button>
    <button @click="subCountNum(5)">-5</button>
    <button @click="delayedSubCount">延迟-1</button>
  </div>
</template>

<script>
  import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';
  export default {
    computed:{
      ...mapState(['count']),
    },
    methods:{
      ...mapMutations(['subCount','subCountNum']),
      ...mapActions(['delayedSubCount'])
    }
  }
</script>

结果

在这里插入图片描述

6、Module

6.1、中型项目

当我们的项目为中型项目，并且用到vuex比较多的时候，我们就一般不会把state、getter、mutation、action都定义在一个js文件里，不然会导致js文件臃肿。

一般会采用模块化方法，分别把这几个提取到单独自己的js文件里面，然后在index.js中分别引入使用即可

在store目录中，分别创建state.js、getters.js、mutations.js、actions.js，然后在index.js中引用即可

目录结构

在这里插入图片描述

state.js
export default {
  count:0
}
getter.js
export default {
  sex(state){
    if(state.count < 1){
      return 1
    }
    return state.count
  }
}
mutation.js
import MUTATION_TYPE from "./mutation-type";

export default {
  [MUTATION_TYPE.ADD_COUNT](state){
    state.count++;
  },
  [MUTATION_TYPE.ADD_COUNT_NUM](state,num){
    state.count += num;
  },
  [MUTATION_TYPE.SUB_COUNT](state){
    state.count--;
  },
  [MUTATION_TYPE.SUB_COUNT_NUM](state,num){
    state.count -= num;
  },
}
action.js
import MUTATION_TYPE from "./mutation-type";

export default {
  delayedAddCount(context){
    // 异步方法
    setTimeout(() => {
      context.commit(MUTATION_TYPE.ADD_COUNT);
    }, 1000);
  },
  delayedSubCount(context){
    // 异步方法
    setTimeout(() => {
      context.commit(MUTATION_TYPE.SUB_COUNT);
    }, 1000);
  }
}
index.js
import Vue from "vue";
import Vuex from "vuex";
import state from "./state"
import getters from "./getters"
import mutations from "./mutations"
import actions from "./actions"

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  // modules,
});

6.2、大型项目(Module)

当我们的项目很大，模块很多的时候，这样好像也并不是特别好，代码也很臃肿，所以，vuex给我们提供了Module功能，按照模块进行分类存放。

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

定义

  • 可以在主index.js下的modules中编写

    在这里插入图片描述

  • 也可以单独创建文件夹，拥有自己单独的index.js、state.js、getters.js、mutations.js、actions.js文件

    在这里插入图片描述

  • user/index.js文件

    在这里插入图片描述

  • state.js文件

    在这里插入图片描述

  • 其他文件就省略不写了，类似state.js文件

  • 然后在外层index.js引入即可

    在这里插入图片描述

使用

state使用

语法

// 要在原来的state后面加上在modules中定义的变量名，然后后面.state中定义的变量
this.$store.state.user.state定义的变量名

使用

新建一个组件或者在原来的组件上直接修改代码即可

<template>
  <div>
    <h2>当前userName值：{{$store.state.user.userName}}</h2>
    <h2>当前password值：{{$store.state.user.password}}</h2>
  </div>
</template>

<script>
  export default {
    methods:{
    }
  }
</script>

结果

在这里插入图片描述

mutation使用

语法

// 和原来使用办法一致，但有问题(下一小节会讲)
this.$store.commit('方法名',参数...)

使用

<template>
  <div>
    <h2>当前userName值：{{$store.state.user.userName}}</h2>
    <h2>当前password值：{{$store.state.user.password}}</h2>
    <button @click="setUserName">点击修改姓名</button>
    <button @click="setPassword">点击修改密码</button>
  </div>
</template>

<script>
  export default {
    methods:{
      setUserName(){
        this.$store.commit('setUserName',"李四");
      },
      setPassword(){
        this.$store.commit('setPassword',"admin");
      },
    }
  }
</script>

结果

在这里插入图片描述

问题

可以看到上面使用mutation中的方法，是和原来写法一样。

那我们假如在原来主index.js中写上属于自己的相同名字的方法呢，那么会执行哪一个方法。结果是都执行，可以自行尝试。下面有解决办法！

默认情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的——这样使得多个模块能够对同一个 action 或 mutation 作出响应。Getter 同样也默认注册在全局命名空间，但是目前这并非出于功能上的目的（仅仅是维持现状来避免非兼容性变更）

在这里插入图片描述

命名空间

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

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

语法

modules:{
    user:{
      // 开启命名空间
      namespaced: true,
      state:{
        userName:'张三',
        password:'123321'
      },
      mutations:{
        setUserName(state,name){
          state.userName = name;
        },
        setPassword(state,password){
          state.password = password;
        },
      },
    }
  },

使用

<template>
  <div>
    <h2>当前userName值：{{$store.state.user.userName}}</h2>
    <h2>当前password值：{{$store.state.user.password}}</h2>
    <button @click="setUserName">点击修改姓名</button>
    <button @click="setPassword">点击修改密码</button>
  </div>
</template>

<script>
  export default {
    methods:{
      setUserName(){
        // 地址前面加上 模块名/
        this.$store.commit('user/setUserName',"李四");
      },
      setPassword(){
        this.$store.commit('user/setPassword',"admin");
      },
    }
  }
</script>

结果

在这里插入图片描述

7、拓展

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

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

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

定义

actions:{
        setUsernameAndCount({ commit,dispatch,rootState,rootGetters },data ){
          
        },
      }

使用

页面

<template>
  <div>
    <h2>当前userName值：{{$store.state.user.userName}}</h2>
    <h2>当前password值：{{$store.state.user.password}}</h2>
    <h2>当前count值：{{$store.state.count}}</h2>
    <button @click="setUserName">点击修改姓名</button>
    <button @click="setPassword">点击修改密码</button>
    <button @click="setUsernameAndCount">点击修改姓名和Count+5</button>
  </div>
</template>

<script>
  export default {
    methods:{
      setUserName(){
        this.$store.commit('user/setUserName',"李四");
      },
      setPassword(){
        this.$store.commit('user/setPassword',"admin");
      },
      setUsernameAndCount(){
        // 传入参数为对象
        this.$store.dispatch('user/setUsernameAndCount',{name:"1234567",count:5});
      }
    }
  }
</script>

index.js

import Vue from "vue";
import Vuex from "vuex";
import state from "./state"
import getters from "./getters"
import mutations from "./mutations"
import actions from "./actions"
import MUTATION_TYPE from "./mutation-type";

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules:{
    user:{
      namespaced: true,
      state:{
        userName:'张三',
        password:'123321'
      },
      mutations:{
        setUserName(state,name){
          state.userName = name;
        },
        setPassword(state,password){
          state.password = password;
        },
      },
      actions:{
        // 一般传入对象为参数
        setUsernameAndCount({ commit,dispatch,rootState,rootGetters },data ){
          // rootGetters 获取主模块的getters
          alert("rootGetters：" + rootGetters.sex)
          // rootState 获取主模块的state
          alert("rootState：" + rootState.count)

          // 修改自己用户名 调用自己模块的setUserName方法
          commit('setUserName',data.name) // user/setUserName

          // 调用主模块的mutations中的方法，修改主模块count
          commit(MUTATION_TYPE.ADD_COUNT_NUM,data.count,{ root: true }) // addCountNum

          // 调用主模块的actions方法，延时count+1
          // dispatch('delayedAddCount',null,{ root:true })
        },
      }
    }
  },
});

结果

在这里插入图片描述

7.2、带命名空间的模块注册全局action

若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中。

语法

someAction: {
    root: true,
    handler (namespacedContext, payload) {
    	// ... 
    } // -> 'someAction'
}

7.3、带命名空间的绑定函数

使用一：

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

<template>
  <div>
    <h2>当前userName值：{{ userName }}</h2>
    <h2>当前password值：{{ password }}</h2>
    <h2>当前count值：{{$store.state.count}}</h2>
    <button @click="setUserName">点击修改姓名</button>
    <button @click="setPassword">点击修改密码</button>
    <button @click="setUsernameAndCount">点击修改姓名和Count+5</button>
  </div>
</template>

<script>
  import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';
  export default {
    computed:{
      ...mapState({
        userName: state => state.user.userName,
        password: state => state.user.password
      }),
    },
    methods:{
      ...mapMutations([
        'user/setUserName', // -> this['user/setUserName']()
        'user/setPassword', // -> this['user/setPassword']()
      ]),
      ...mapActions([
        'user/setUsernameAndCount', // -> this['user/setUsernameAndCount']()
      ]),
      setUserName(){
        this['user/setUserName']("李四");
      },
      setPassword(){
        this['user/setPassword']("admin")
      },
      setUsernameAndCount(){
        this['user/setUsernameAndCount']({name:"1234567",count:5})
      }
    }
  }
</script>
使用二：

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

<template>
  <div>
    <h2>当前userName值：{{ userName }}</h2>
    <h2>当前password值：{{ password }}</h2>
    <h2>当前count值：{{$store.state.count}}</h2>
    <button @click="setUserName1">点击修改姓名</button>
    <button @click="setPassword1">点击修改密码</button>
    <button @click="setUsernameAndCount1">点击修改姓名和Count+5</button>
  </div>
</template>

<script>
  import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';
  export default {
    computed:{
      ...mapState("user",{
        userName: state => state.userName,
        password: state => state.password
      }),
    },
    methods:{
      ...mapMutations("user",[
        'setUserName', // -> this.setUserName()
        'setPassword', // -> this.setPassword()
      ]),
      ...mapActions("user",[
        'setUsernameAndCount', // -> this.setUsernameAndCount()
      ]),
      // 注意，自己方法不可与引用进来的方法重名！！！
      setUserName1(){
        this.setUserName("李四");
      },
      setPassword1(){
        this.setPassword("admin")
      },
      setUsernameAndCount1(){
        this.setUsernameAndCount({name:"1234567",count:5})
      }
    }
  }
</script>
使用三

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

<template>
  <div>
    <h2>当前userName值：{{ userName }}</h2>
    <h2>当前password值：{{ password }}</h2>
    <h2>当前count值：{{$store.state.count}}</h2>
    <button @click="setUserName1">点击修改姓名</button>
    <button @click="setPassword1">点击修改密码</button>
    <button @click="setUsernameAndCount1">点击修改姓名和Count+5</button>
  </div>
</template>

<script>
  // import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';
  import { createNamespacedHelpers } from 'vuex'
  const { mapState, mapMutations, mapActions } = createNamespacedHelpers('user')
  export default {
    computed:{
      // 在 `some/nested/module` 中查找
      ...mapState({
        userName: state => state.userName,
        password: state => state.password
      }),
    },
    methods:{
      // 在 `some/nested/module` 中查找
      ...mapMutations([
        'setUserName', // -> this.setUserName()
        'setPassword', // -> this.setPassword()
      ]),
      ...mapActions([
        'setUsernameAndCount', // -> this.setUsernameAndCount()
      ]),
      // 注意，自己方法不可与引用进来的方法重名！！！
      setUserName1(){
        this.setUserName("李四");
      },
      setPassword1(){
        this.setPassword("admin")
      },
      setUsernameAndCount1(){
        this.setUsernameAndCount({name:"1234567",count:5})
      }
    }
  }
</script>

8、vue-devTools

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。

下载

谷歌可以通过：https://www.extfans.com/search/?q=vue，选择第一个vue.js devtools进行下载插件

使用

调试的时候，按住F12，然后就可以在浏览器开发者工具中看到

在这里插入图片描述

在这里页面里面可以组件内所有data的值，以及其他属性的值，可以进行很好的调试观察

在这里插入图片描述

在这里可以观察到vuex的值的变化

在这里插入图片描述

在这里你可以看到你执行mutation、action方法的具体时间，以及参数的变化

在这里插入图片描述

9、使用讲解

  • 小型项目(使用vuex不多的情况下)，就会把所有内容都放在主模块下的index.js里面，也基本不使用mutation-type.js管理
  • 中型项目(使用vuex不多也不少的情况下)，就会把index.js进行模块化管理，每个模块创建单独的js文件进行管理，可以视情况使用mutation-type.js进行管理
  • 大型项目(使用vuex很多的情况)，就会使用vuex的modules进行模块管理，并且会使用mutation-type.js管理
vuex 测试版本
02-26
测试vuex性能集合,结合mint-ui实现三级联动以及swipe轮播
Vue3之Vuex
m0_52744273的博客
04-04 5493
vuex的基本使用，vuex的模块化，vuex的进阶
vue3使用vuex详解
最新发布
weixin_54896782的博客
07-14 422
Vuex是Vue.js的状态管理库，提供集中式数据存储和管理。其核心包括：state存储数据，mutations同步修改数据，actions处理异步操作，getters计算派生数据。安装使用Vuex需先创建store实例，注册到Vue应用中。组件可通过$store访问数据，或使用useStore组合式API。为简化代码，可借助mapState等辅助函数。大型应用可通过模块化组织store，支持TypeScript类型定义。Vuex有效解决了组件间共享状态的管理问题，使数据流更加清晰可预测。
Vuex
weixin_45174537的博客
09-04 523
vue中各个组件之间传值 1.父子组件 父组件–>子组件，通过子组件的自定义属性：props 子组件–>父组件，通过自定义事件：this.$emit(‘事件名’,参数1,参数2,…); 2.非父子组件或父子组件 通过数据总数 Bus，this.root.root.root.emit(‘事件名’,参数1,参数2,…) 3.非父子组件或父子组件 更好的方式是在vue中使用vuex 方法1...
vue3中使用Vuex
九仞山的专栏
06-11 8776
详细介绍了vue3中使用Vuex的相关特性和方法,，包括State，Getter，Mutations，Action，Module和一些辅助函数的使用方法和技巧
在Vue3中使用Vuex
前端大白话
02-16 1485
想象一下你正在开发一个大型的 Vue 3 应用，就好比你在建造一座超级大的商场。商场里有很多店铺，每个店铺都有自己的商品信息、库存数量等。在 Vue 应用里，不同的组件就像是这些店铺，它们可能都需要共享一些数据，比如用户的登录状态、购物车的商品列表。如果没有一个统一的地方来管理这些数据，就会出现混乱。比如一个组件修改了用户的登录状态，但是其他组件并不知道，还以为用户没登录呢。Vuex 就像是商场的管理中心，它把这些需要共享的数据集中管理起来，这样各个组件都能从这里获取和修改数据，保证数据的一致性。
react-vue-devtools-6.x.x.zip
05-22
版本6.6.4是目前支持Vue 2.x到3.x版本的最新稳定版本。通过这个工具，Vue开发者能够查看组件层级、状态快照、路由信息以及Vuex存储状态。Vue Developer Tools与React Developer Tools一样，极大地提升了Vue应用的...
vue-devtools6.14.crx 浏览器插件
02-23
3. **Vuex 支持**：如果应用使用了 Vuex 状态管理库，Vue Devtools 还可以展示 Vuex store 的状态，包括状态树、mutation 和 action 历史记录。 4. **时间旅行调试**：通过 Vuex 的时间旅行功能，开发者可以回溯到...
基于vue-cli4.0 vue-router4.x+vuex4.x+ant-design开发的后台管理系统模板.zip
02-02
是基于vue3.0 vue-cli4.0 vue-router4.x+vuex4.x+ant-design-vue2.x开发的后台管理系统模板，包含权限路由、权限按钮、流程配置、个人中心等基础功能. ## 文件 ```bash # vue-antd-admin - src - api - assets -...
VueThink是一套基于Vue全家桶（Vue2.x + Vue-router2.x + Vuex）+ ThinkPHP5的前重组框架 .zip
12-01
VueThink是一套基于Vue全家桶（Vue2.x + Vue-router2.x + Vuex）+ ThinkPHP5的前重组框架。VueThink项目介绍VueThink是一套基于Vue全家桶（Vue2.x + Vue-router2.x + Vuex）+ Thinkphp的前扶手分离框架。 脚手架构建...
vue-vben-admin:基于Vite2，vue3.0，ant-design-vue 2.x，打字稿，vuex，vue-router的vue3样式管理员，正在努力进行更新。
05-10
使用最新的vue3 ， vite2 ， TypeScript和其他主流技术开发，开箱即用的中端和后端前端解决方案也可以用作学习参考。 特征 最新技术发展水平：使用诸如Vue3 / vite2之类的前端前端技术开发 TypeScript ：应用程序级...
vue3使用vuex
qq_55272229的博客
08-18 3175
可以学习详细,这篇笔记是写vue2升级vue3后使用vuex,或者忘记如何使用vuex做状态管理的情况vueX状态管理。
Vuex (3.x)
motor_tang的博客
12-05 421
Vuex 用法
vue3.x使用vuex
small streamed bun
01-12 1万+
在vue3.x项目中需使用vuex4.x版本； 安装 直接下载/CDN https://unpkg.com/vuex npm /cnpm /yarn npm install vuex@next --save cnpm install vuex@next --save yarn add vuex@next --save 项目中使用 在根目录下创建store文件夹，在store文件夹下创建index.js文件，在index.js文件中书写代码，与vue2.0中使用的vuex相差不大，直接上代码： import
vue之vuex
我心坚持
02-18 812
vuex状态管理；相当于一个共享数据；其中的一个数据的更改其他数据也是更改的。 所谓的状态就是数据：状态 = 数据 vuex里面有actions、mutations、state、getters、module几个对象组成。这几个对象统一归store管理。vm和vc上都有$tore并且整个项目仅有这一个store。 vuex运行原理： 组件派发任务到actions，actions触发mutations中的方法，然后mutations来改变state中的数据，数据变更后触发组件的更新渲染。 也可以跳过action
Vue3 学习——vue中使用vuex(超详细)
敲代码的小李同学的博客
07-18 3万+
Vue 中 Vuex 的介绍与项目实操应用。
vue3之vuex
weixin_47039303的博客
11-17 274
1.(面试必问 大项目)单向数据流导致可能层级较深(管理全局的状态) state:数据源 view :将state数据到视图 actions:状态变化 2.小项目用麻烦 mutations:修改数据的对象(不可以异步) 3.组成 state: getters:得到数据 mutations: actions: mapState:得到State mapActions: mapMuta: 4.安装 yarn add vuex@next --save 5.使用 建一个js文件
Vue3中Vuex的使用
热门推荐
雨落宿命敲的博客
03-13 5万+
Vuex是做什么的？ Vue：状态管理工具 状态管理是什么? 需要在多个组件中共享的状态、且是响应式的、一个变，全都改变。 例如一些全局要用的的状态信息：用户登录状态、用户名称、地理位置信息、购物车中商品、等等 这时候我们就需要这么一个工具来进行全局的状态管理，Vuex就是这样的一个工具。 单页面的状态管理 View–>Actions—>State 视图层(view)触发操作(action)更改状态(state)响应回视图层(view) vuex（Vue3.2版本） store/index.j
vue-cli3.x 安装
03-14
嗯，用户想了解如何安装Vue CLI 3.x。我需要先回忆一下步骤，确保信息准确。首先，Vue CLI的安装通常需要Node.js环境，所以可能需要先确认用户是否安装了Node.js和npm。然后，Vue CLI 3.x的包名称是@vue/cli，所以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值