Vuex详解---快速理解

栏目: JavaScript · 发布时间: 5年前

内容简介:Vuex是什么,个人理解是vue.js中集中管理状态的一种模式。如果构建的应用比较简单,没有必要使用vuex,简单的单向数据流就能满足产品需求,体现单向数据流的简洁性,如下:如果应用是小型的、组件不多、组件之间的状态依赖不多、结构清晰便于维护,组件之间很少有数据之间的关联,这样的情况,没必要使用vuex。

Vuex是什么,个人理解是vue.js中集中管理状态的一种模式。 官网 解释:Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。

如果构建的应用比较简单,没有必要使用vuex,简单的单向数据流就能满足产品需求,体现单向数据流的简洁性,如下:

<template>
  <div>{{count}}</div>
  <el-button @click="increment ">count</el-button>
</template>
new Vue({
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
    }
  }
})

适用场景:

如果应用是小型的、组件不多、组件之间的状态依赖不多、结构清晰便于维护,组件之间很少有数据之间的关联,这样的情况,没必要使用vuex。

相反,哪些比较大型的应用,多个视图组件共用一个状态,一个组件的修改,需要更新其它关联的组件,此时Vuex比较适用。类似商城系统、外卖系统等。

Vuex的使用:

安装vuex,在项目中执行命令:npm install vuex --save-dev 或者使用淘宝镜像 cnpm install vuex --save-dev

创建文件&&书写代码部分:

1、创建文件夹store,然后在里面创建文件store.js,并引入相关文件:

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import * as actions from './actions'
import mutations from './mutations'
import state from './state'
Vue.use(Vuex)
// 注册上面引入的各大模块
const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  state
})
export default store// 导出store并在 main.js中引用注册。

2、创建文件state.js,代码如下:

const state = {
  count: 0,
  countNumber: 10
}
export default state

3、创建文件actions.js,代码如下:

export function count ({commit}, name) {
  return commit('count', name) // 触发mutations中的方法&&传值
}

4、创建文件getters.js。(我的理解是store的计算属性)

const getters = {
  countNumber (state) {
    state.countNumber+=2 // state中countNumber字段发生变化,就会触发该方法
    return state.countNumber
  }
}

5、创建文件mutations.js,代码如下:

const mutations = {
  count (state, num) { // num为dispatch传递的参数
    state.count+=num
    state.countNumber+=num
  }
}
export default mutations

6、main.js文件,需要引入store:

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store.js' // 导入文件store

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

7、文件HelloWorld.vue中的相关操作:

<template>
  <div class="hello">
      <div class="addClsFather">
          <div class="addCls" @click="addFuc">
              Add
          </div>
          <div>
              未使用vuex:{{count}}
          </div>
          <div>
              使用vuex:{{this.$store.state.count}}
          </div>
          <div>
              计算属性getters:{{countNumber}} ¥
          </div>
      </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
      count: 0
    }
  },
  computed: mapGetters([
    'countNumber'
  ]),
  methods: {
    addFuc() {
        this.count++
        this.$store.dispatch('count', 5) // 触发action中的方法&&传值
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.addClsFather {
    margin: 50px 100px;
}
.addCls {
    cursor: pointer;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: blue;
    text-align: center;
    color: #fff;
    border-radius: 5px;
}
</style>

整体思路:

1、在文件HelloWorld.vue中,点击"Add"按钮,通过dispatch触发action并传值;

2、在action中,触发mutations中的方法并传值;

3、通过mutations改变state中的字段值;

4、对于使用了getters的字段,在state中的该字段改变后,会触发getters,并进行相关的处理(getters可以理解为state的计算属性);

5、state、getters改变后,渲染到DOM中。

注:在使用getters的字段,需要在相关关的(HelloWorld.vue)页面引入mapGetters字段,并添加computed属性,如下(不使用computed属性,不会起作用):

computed: mapGetters([
    'countNumber'
]),

以上是对vuex整体的摘要,下期分析vuex中的mapState,mapGetters,mapMutations,mapActions


以上所述就是小编给大家介绍的《Vuex详解---快速理解》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP典型模块与项目实战大全

PHP典型模块与项目实战大全

杨宇 / 清华大学出版社 / 2012-1 / 79.00元

《PHP典型模块与项目实战大全》以实战开发为原则,以PHP典型模块和项目开发为主线,通过12个高质量的PHP典型模块和6个PHP大型应用,向读者揭示了Web开发的整体结构,并详尽地介绍PHP开发与建站的技术要点。《PHP典型模块与项目实战大全》附带1张DVD,内容是作者为《PHP典型模块与项目实战大全》录制的全程多媒体语音教学视频及《PHP典型模块与项目实战大全》所涉及的源代码。《PHP典型模块与......一起来看看 《PHP典型模块与项目实战大全》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具