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详解---快速理解》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 详解BERT阅读理解
- JVM详解之:汇编角度理解本地变量的生命周期
- 云从刷榜 RACE 阅读理解数据集论文详解
- 百度 CTO 王海峰详解知识图谱与语义理解
- 深入理解JAVA I/O系列二:字符流详解
- 理解原型其实是理解原型链
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。