vuex之state、Mutations、getters、actions、modules

最新推荐文章于 2022-04-01 14:44:49 发布
最新推荐文章于 2022-04-01 14:44:49 发布
阅读量463 收藏 1
点赞数
分类专栏： Vue 文章标签： state actions getters mutations modules
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44010187/article/details/96307312
版权

state
1.文件创建
当然，文件创建的位置自己可以定，本文例子都在src文件夹下进行创建。
main.js

import Vue from 'vue'
import store from './store'
import vuex_test from './vuex_test.vue'


new Vue({
  el:'#app',
  store,
  render:xx=>xx(vuex_test)
})

vuex_test.vue

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{$store.state.count}}----------{{count}}</p>
  </div>
</template>
<script>
  export  default {
    name : 'app',
    data() {
      return {
        count : 0       // 计算属性名称不能与data中定义的数据相同 The computed property "count" is already defined in data.
      }
    }
  }
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

export default new Vuex.Store({
  state

})

最基本的用法{{$store.state.count}}引用，显示结果：
在这里插入图片描述
其他 方式引用1：
vuex_test.vue中添加：

computed : {
      count(){
        return this.$store.state.count+2
      }
    }

哦豁，报错了，让我们看下错误：

vue.esm.js?c5de:628 [Vue warn]: The computed property "count" is already defined in data.
found in
---> <App> at src/vuex_test.vue
       <Root>

在这里插入图片描述
然后我百度了下原因：
Vue binds all properties in the data method to the root of the instance. It also does this for computed properties, and methods, so you must use different names to avoid naming conflicts.
The main problem in the code you posted is that you have naming conflicts with every data property. In fact, because you are using a Vuex store, you don’t need the data properties at all, just the computed properties.
翻译过来是：
VUE将数据方法中的所有属性绑定到实例的根。它还对计算的属性和方法执行此操作，因此您必须使用不同的名称来避免命名冲突。
您发布的代码中的主要问题是，您与每个数据属性都存在命名冲突。实际上，因为您使用的是Vuex存储，所以根本不需要数据属性，只需要计算的属性。

大概意思就是data中的count和computed中的count命名冲突了，咱们只用到计算属性了，所以data中去掉，他出现的本地也只是为了给｛｛count｝｝赋初值而已。

去掉后，看结果：

在这里插入图片描述
其他 方式引用2：
vuex_test.vue中添加：

computed:mapState({
      // count:state => state.count
      count:function (state) {
        return state.count
      }
    })

另外记得引用mapState

import { mapState } from 'vuex'

在这里插入图片描述
剩下一种其实类似于上面，适应于只显示不变更数据的情况：

//辅助函数，映射this.count到$stote.state.count
    // computed:mapState([
    //   "count"
    // ]),

    computed: {
      ...mapState([
        'count'
      ])
    }

注意上面第一种为直接数组的格式，第二种为标准语法，三个点去掉就报错滴
在这里插入图片描述

这就是获取store中的state数据并显示的几种情况，切记，多个computed时只有一个会生效，默认最后一个生效，本文例子记得将原来的覆盖或者注释掉

接下来便是Mutations触发状态的用法：
store.js文件中规定Mutations中几种规则并下方调用

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

// 访问触发状态
const mutations = {
  addNumberByNumbert(state,n){
    state.count += n;
  },
  addNumberByObject(state,obj){
    state.count += (obj.a+obj.b);
  },
  addNumber(){
    state.count ++;
  },
  delNumber(state){
    state.count --;
  }
}

export default new Vuex.Store({
  state,
  mutations

})

vuex_test.vue中进行修改：

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations } from 'vuex'
  export  default {
    name : 'app',
    computed: {
      ...mapState([
        'count'
      ])
    },
    // methods:mapMutations([
    //   'addNumber',
    //   'delNumber'
    // ])
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ])
    }
  }
</script>

运行结果：
在这里插入图片描述

getters的用法：
store.js中修改添加：

const getters = {
  count:function(state){
    return state.count += 100
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters

})

vuex_test.vue中进行修改：

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations,mapGetters } from 'vuex'
  export  default {
    name : 'app',
    computed:{
        ...mapState([
          'count'
        ]),
        ...mapGetters([
          'count'
        ])
    },
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ])
    }
  }
</script>

运行结果：
在这里插入图片描述

action异步加载：
store.js中添加： getters中暂且设置为0

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

// 访问触发状态
const mutations = {
  addNumberByNumbert(state,n){
    state.count += n;
  },
  addNumberByObject(state,obj){
    state.count += (obj.a+obj.b);
  },
  addNumber(){
    state.count ++;
  },
  delNumber(state){
    state.count --;
  }
}

const getters = {
  count:function(state){
    return state.count += 0
  }
}

const actions = {
  addNumberP(context){
    context.commit('addNumberByObject',{a:5,b:10}),
      setTimeout(() =>{
        context.commit('delNumber')
      },3000)
    console.log("本条语句先与计时器被执行")
  },
  delNumberP({commit}){
    commit('delNumber')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions

})

vuex_test.vue中进行修改：

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
    <p>
      <button @click="addNumberP">actions-addNumberP</button>
      <button @click="delNumberP">actions-delNumberP</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
  export  default {
    name : 'app',
    computed:{
        ...mapState([
          'count'
        ]),
        ...mapGetters([
          'count'
        ])
    },
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ]),
        ...mapActions({
            addNumberP:'addNumberP',
            delNumberP:'delNumberP'
          })
      }
  }
</script>

在这里插入图片描述
执行结果：
先计数成为15，然后执行log输出，最后count-1变成14
在这里插入图片描述

附完整代码：
store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

// 访问触发状态
const mutations = {
  addNumberByNumbert(state,n){
    state.count += n;
  },
  addNumberByObject(state,obj){
    state.count += (obj.a+obj.b);
  },
  addNumber(){
    state.count ++;
  },
  delNumber(state){
    state.count --;
  }
}

const getters = {
  count:function(state){
    return state.count += 0
  }
}

const actions = {
  addNumberP(context){
    context.commit('addNumberByObject',{a:5,b:10}),
      setTimeout(() =>{
        context.commit('delNumber')
      },3000)
    console.log("本条语句先与计时器被执行"+new Date())
  },
  delNumberP({commit}){
    commit('delNumber')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions

})

vuex_test.vue

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
    <p>
      <button @click="addNumberP">actions-addNumberP</button>
      <button @click="delNumberP">actions-delNumberP</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
  export  default {
    name : 'app',
    computed:{
        ...mapState([
          'count'
        ]),
        ...mapGetters([
          'count'
        ])
    },
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ]),
        ...mapActions({
            addNumberP:'addNumberP',
            delNumberP:'delNumberP'
          })
      }
  }
</script>

模版的简单用法：
在这里插入图片描述
在这里插入图片描述

运行结果：
在这里插入图片描述

跳跳呦�
关注
专栏目录
vuex中的state getters mutations actions modules
ANGWH的博客
08-09 383
Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 vuex是单向数据流； 安装Vuex 命令行： vue add vuex 安装完成以后在src文件夹中多了一个store文件夹，这个index.js文件是vuex的主文件 index.js中要有 Vue.use(Vuex) //在vue构造函数中去注入vuex，在vue实例对象中有$store 一般下载后就有 Vuex的stor
vue3知识点7 vue3.0+cli4.5 vuex vuex安装配置 state mutations actions modules命名空间 getters
yangyangdt的博客
01-09 818
本文详解了vue3.0+vue-cli4.5的vuex中各种属性的用法。state mulations actions modules getters等。
Vuex modules模式下mapState/mapMutations的操作实例
10-16
主要介绍了Vuex modules 模式下 mapState/mapMutations 的操作实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vuex最全使用总结(state、mutations、actions、getters、modules模块化)
旭哥的博客
05-20 4238
一、Vuex各部分介绍 安装 npm install vuex --save 1、store中代码 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 此处存储数据 }, mutations: { // 此处用于处理state中数据，存放方法类似vue中的methods }, actions: { /
vue Vuex 使用 state getters、mutations、actions、modules
蜗牛速度额的博客
12-16 826
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;...
state getters mutations actions modules
weixin_41675013的博客
05-06 100
Vue2|浅学一下VueX吧（state,getters,mutations,actions,modules)
weixin_62395055的博客
03-03 1282
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,其实通俗一点来讲可以理解成放公共变量的地方，你可以在这里放各个组件之间用到的变量，不用传来传去，你可能会想，我自己拿一个组件专门放公共变量挂到Vue的prototype上面去不就行了，也行，但是不是响应式的，要是你说写一个响应式的也不是不行，那也行，那你挺牛。 官网上扒拉下来这张图 import { createStore } from 'vuex' export default createStore({ state: {
Vuex：state，mutations，actions，getters，modules/网络模块封装axios
Rashu99's blog
03-14 367
Action-State-View vue init webpack vuextest npm install vuex --save 创建store 文件夹 以及index.js 因为在Vue实例下挂载了store 所以有$store属性 可以使用 $store.state.counter
vuex 最好的,最详细的笔记 使用方法 vuex 状态仓库 store state getters mutations actions modules详解
weixin_45810135的博客
09-30 823
vuex
web前端高级VUE - vuex中的state/mutations/actions/modules/getters的基本解析及基于代码分析vuex的原理
lixiaosenlin的专栏
12-25 5590
vuex state 用于存放组件间互相通信的属性值。 原则上state中的属性只能在各个组件之间使用，而不能修改，如果要修改需要在mutations中修改 mutations 这里存放的都是一些函数，用于修改state中的属性值 这里的函数中只接收两个参数：state和options 如果某组件中需要修改state中的属性值，则需在该组件中用this.$store.commit(‘方法名’, 参数)的方式来调用，即需要用commit方法来调用mutations中的函数
vuex的五个属性state、getters,、mutations,、actions、modules
guairena的博客
11-18 305
数据状态管理器（vuex） 作用：管理数据和状态 Vuex有五个核心概念： state, getters, mutations, actions, modules 使用（和 vue-router 一样） 下载包 vuex npm i vuex 引入包 vuex Vue 实例上注册 Vue.use(vuex) 创造一个仓库实例 const store = new Vuex.Store() 把创...
Vuex中的state、mutations、actions、modules、getters
weixin_43188893的博客
06-08 531
VueX Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 state 存储状态； 驱动应用的数据源 mutations 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation ； mutation必须是同步的，如果要异步需要使用action ； 它会接受 state 作为第一个参数 ，提交载荷作为第二个参数。（提交荷载在大多数情况下应该是一个对象）,提交荷载也可以省略 const store = new Vuex.Store({ state: {
vuex moduls模块化，mutations和actions使用区别
Jerry子辰的博客
02-25 658
vuex-moduls 在一些项目中vuex需要分成一些各自模块，彼此数据不影响 文件结构：在src/store内新建模块名的文件夹，例： a.js和aa.js 分别是模块a和aa 其中每个js文件都可以当成一个单独vuex结构来写，在a.js中（aa.js也差不多） export default { namespaced: true, // 详见后后面的使用方法3 state: { aId: '500' }, mutations: { changeId(state,va
vue的state, getters, mutations, actions, modules详解
姚辉乾
10-26 2102
  先安装Vuex     后面必须得用--save因为生产环境需要用到 npm install vuex --save 然后里 新建个store   下面新建个index 然后得在main.js里面导入一下，如下图： store 里面的num.js 和str.js用的module来写的demo里面没啥东西 我们再看一下在模板里面怎么写的 效果图： 源码：...
Vuex基础核心概念State,Mutations,Actions,Getters,Modules
horizon12的博客
03-29 243
Vuex 是专为vue.js设计的全局状态管理工具。集中管理检测组件（数据）的状态变化，实现全局状态下的数据共享，高效实现组件之间的数据通信，存储在Vuex中的数据都是响应式的。也就是说当Vuex中的数据发生改变的时候，调用该数据的组件也会同步发生变化。 vue组件之间通信： 父传子：通过v-bind绑定 子传父：通过v-on绑定方法 兄弟组件通信：通过定义一个evenBus事件总线进行通信 import Vue from ‘vue’ import Vuex from ‘vuex’ Vue.use(‘Vue
vuex之getters使用和传参
qq_42683773的博客
12-30 2116
除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters .js文件： state: { list: [1,2,3,4,5,6,7,8,9,10] } 组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它 **定义getters** getters: { // getters函数的第一个参数是 state // 必须要有返回值 fi
Vuex中的mutations属性详解
qq_40117020的博客
08-27 1万+
一、mutations属性介绍 是唯一一种方式来修改state中的状态的；在组件的自定义方法中，使用this.$store.commit(‘对应mutations中的方法’, 新的值)方法，把新的值提交给mutations中相对应的方法，mutations属性中的每个方法中有两个参数，分比为state和payload；state其实就是vuex中的state属性，payload叫做mutations的载荷，其实就是传过来的值。一般payload传的是一个对象，这样可以包含多个字段并且记录的 mutatio
Vue进阶（四十三）：Vuex之Mutations详解
热门推荐
IT全栈 华强工作室
04-09 1万+
通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。 2.怎么用mutations？ mutation结构：每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件，当触发...
Vuex中mutations的用法
Anony_me的博客
04-01 1万+
Vuex中mutations的用法之一 在 Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合，这是Vuex 设计很重要的一点，就是把处理数据逻辑方法全部放在 mutations 里面，使得数据和视图分离。 Mutations使用 Vuex 中的 mutations 非常类似于事件，每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler)，也可以理解为{type:handler()}，这和订阅发布有
深入探索Vuex3：State、Getters、Mutation、Action全解析
“vue2生态之vuex3的深入学习资料涵盖了Vuex的核心概念，包括State、Getters、Mutation、Action、Module、命名空间以及mapState等API的详细使用方法，旨在帮助Vue开发者更好地理解和应用Vuex状态管理。” 在Vue.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值