美文网首页
vuex基础

vuex基础

作者: 未vv | 来源:发表于2020-03-26 11:14 被阅读0次

1.vuex是什么?

状态管理模式,集中式存储管理,多组件需要共享状态时使用vuex

1.1状态管理模式

单个组件中的状态管理(单向数据流)


image.png
new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

state,驱动应用的数据源;
view,以声明方式将 state 映射到视图;
actions,响应在 view 上的用户输入导致的状态变化。

image.png
注意:Actions不是必须经过的步骤
其中State可以通过Vue Components Commit(提交) Mutations修改(不经过Actions),但是当有异步操作时,Devtools无法跟踪State的状态,这时就需要经过Actions

App.vue

<template>
  <div id="app">
    <h2>{{ $store.state.counter }}</h2>
    <button @click="add">+</button>
    <button @click="reduce">-</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {},
  methods: {
    add() {
      this.$store.commit('increment')
    },
    reduce() {
      this.$store.commit('decrement')
    }
  }
}
</script>

store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    counter: 100
  },
  mutations: {
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  }
})
export default store

mapState

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
    counter: 10
  }
})
export default store
<template>
  <div id="app">
    <!-- <h2>{{$store.state.counter}}</h2> -->
    <h2>{{ counter }}</h2>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  data () {
    return {}
  },
  computed:{
     // 映射 this.counter 为 store.state.counter
    ...mapState(['counter'])
  }
}
</script>

mapState使用对象的形式

<template>
  <div id="app">
   <h2>{{myCount}}</h2>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  data () {
    return {}
  },
  computed:{
     // 映射 this.myCount 为 store.state.counter
    ...mapState({myCount:'counter'})
  }
}
</script>

相关文章

  • vuex基础

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有...

  • vuex 基础

    标签: vue [toc] 大纲: 什么时候用到vuex,简介vuex,举例子说明vuex的最佳实践;细节: ac...

  • vuex基础

    vuex介绍 需求:父子组件的传值可以通过props和发布事件来传递,不相关的组件如何传递数据,或者说共用一份数据...

  • vuex基础

    1.vuex是什么? 状态管理模式,集中式存储管理,多组件需要共享状态时使用vuex 1.1状态管理模式 单个组件...

  • vuex基础

    vuex Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦...

  • Vuex 基础

    零、场景说明通过vuex实现计数器的功能 一、入口文件进入vuex 二、入口文件修改 new一个vuex的Stor...

  • Vuex基础

    父子组件之间的通信,父组件通过props向子组件传递参数,子组件通过$emit将数据回传给父组件。但是如果我们有多...

  • 【Vuex】基础

    1.Vuex干什么用的 1.1存在的问题 多个组件共享状态时,必须实现: 多个视图依赖于同一状态。 来自不同视图的...

  • vuex 基础结构

    state.js 与组件、项目、模块相关的底层数据 getters.js 对数据的映射,可以写一些复杂的判断逻辑 ...

  • vuex基础用法

    简单汇总一下vuex的最基础的用法 服务端渲染的写法(推荐使用)

网友评论

      本文标题:vuex基础

      本文链接:https://www.haomeiwen.com/subject/akfoyhtx.html