优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据。

详情请参考官网文档__链接

规则:

1:应用层级的状态应该集中到单个 store 对象中。

2:提交 mutation 是更改状态的唯一方法,并且这个过程是同步的

3:异步逻辑都应该封装到 action 里面

使用场景1:例如要实现在一个显示组件中提交表单,另一个组件的内容需要随之改变:

没有使用vuex前: (与服务端交互2次)

表单组件提交内容时,我们需要与服务端交互一次(提交);

显示组件更新内容时:我们又需要与服务端交互一次(获取)。

使用vuex后: (与服务端交互1次)

表单组件提交内容时,我们在actions中与服务端交互,然后触发mutation,改变state中的数据状态;

显示组件直接使用getters获取states中的数据。

使用场景2如果组件只在本地改变数据,不与服务端交互,并且显示组件也要随之改变。那不使用vuex是非常难实现的。

没有使用vuex前:

?

使用vuex后:

触发mutation,改变state中的数据状态;

显示组件直接使用getters获取states中的数据。

实例1:加减法,实现组件间的值一同变化

文件目录:

1:编写app.vue

<template>
<div id="app">
<router-view></router-view>
<div>
count is {{count}}
<router-link to="/component1">组件1</router-link>
<router-link to="/component2">组件2</router-link>
</div>
</div>
</template> <script>
import {mapGetters, mapActions} from 'vuex'
export default {
name: 'app',
computed: mapGetters([
'count'
])
}
</script>

这里需要知道mapGetters的含义: mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性。传送门

2:编写 component1.vue和 component2.vue。

这两个组件的内容一样(组件二中,请改为 组件2 count is,是为了好区分):

<template>
<div class="hello">
组件1count is {{count}}
<button @click="increment">+5</button>
<button @click="decrement">-3</button>
</div>
</template> <script>
import {mapGetters, mapActions} from 'vuex'
export default {
computed: mapGetters([
'count'
]),
methods: mapActions([
'increment',
'decrement'
])
}
</script>

  

3:router/index.js 路由文件

import Vue from 'vue'
import Router from 'vue-router'
import component1 from '@/components/component1'
import component2 from '@/components/component2'
Vue.use(Router) export default new Router({
routes: [
{
path: '/component1',
name: 'component1',
component: component1
},
{
path: '/component2',
name: 'component2',
component: component2
}
]
})

  

4:编写vuex/index.js   

import Vue from 'vue'
import Vuex from 'Vuex'
import getters from './getters'
import actions from './actions'
import mutations from './mutations' Vue.use(Vuex) const state = {
count: 0
} const store = new Vuex.Store({
state,
getters,
actions,
mutations
}) export default store

这里需要知道state的含义:传送门

5:编写vuex/actions.js

const actions = {
increment : ({commit}) => commit('increment'),
decrement : ({commit}) => commit('decrement')
} export default actions

这里需要知道actions的含义:传送门

6:编写vuex/mutaions.js

const mutations = {
increment : state =>{
state.count = state.count+5
},
decrement : state =>{
state.count = state.count-3
},
} export default mutations

这里需要知道mutaions的含义:传送门

7:编写vuex/getters.js

const getters = {
count: state => state.count
} export default getters

这里需要知道getters的含义:传送门

8:编写main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/index' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})

  

npm run dev后,启动项目:

二:直接写在一个文件中的方式:

import Vue from 'vue'
import Vuex from 'Vuex' Vue.use(Vuex) const state = {
candidateEduList: [],
relationList: []
}
const mutations = {
// 设置教育列表
setEduList(state, resData) {
state.candidateEduList = resData
},
// 设置关系列表
setRelationList(state, resData) {
state.relationList = resData
}
} const store = new Vuex.Store({
state,
mutations
}) export default {
store
}

1、组件中直接commit

this.$store.store.commit('setLogin')

带参数的方式:

this.$store.store.commit('setLogin',data)

  

 2、组价中读取

this.$store.store.state

  

vue学习笔记(五):对于vuex的理解 + 简单实例的更多相关文章

  1. Vue学习笔记(五)——配置开发环境及初建项目

    前言 在上一篇中,我们通过初步的认识,简单了解 Vue 生命周期的八个阶段,以及可以应用在之后的开发中,针对不同的阶段的钩子采取不同的操作,更好的实现我们的业务代码,处理更加复杂的业务逻辑. 而在这一 ...

  2. vue学习笔记(五)条件渲染和列表渲染

    前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...

  3. Vue学习笔记五:事件修饰符

    目录 什么是事件修饰符 没有事件修饰符的问题 HTML 运行 使用事件修饰符 .stop阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事 ...

  4. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  5. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  6. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  7. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  8. vue学习笔记之:为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  9. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

随机推荐

  1. js中哪些值会被认为false?

    在javascript中,只有 false null undefined 空字符串 即 “” 数字  0 数字 NaN 会被当作false,其余都是真. 注:字符串 “false” 也会被当作真.

  2. 关于nodejs下载组件经常失败的问题

    由于最近在刚开始做一个前台element和mybatisplus的项目,但是在使用nodejs下载vue的脚手架和各种组件时,会经常出现下载失败的问题,进而导致前台无法启动. 在网上查询之后发现在下载 ...

  3. 笔记: js构造函数与原型

    目录 构造函数与原型介绍 涉及三种引用的操作 有关原型及原型链的一些相关方法总结 @ 构造函数与原型介绍 1.函数与函数的原型对象(prototype object): 在JavaScript中,创建 ...

  4. webpack-dev-server 多入口自动刷新,支持对象

    万物的来源~webpack 本身 watch webpack watch 传送门 webpack 可以监听文件变化,当它们修改后会重新编译 watch boolean 启用 Watch 模式.这意味着 ...

  5. Spring : Spring Security

    ==========================================================================spring-security-过滤器: 顶级Fil ...

  6. PADS随记

    在PADS,PCB板设计中,怎么一次就把丝印的大小设置好? CTRL+ALT+F  组合键 打开 选择过滤器(Filter) 如下图 去掉其他的勾选,只选择 Labels . 之后在板子上鼠标拖动选上 ...

  7. Python学习笔记五:字符串常用操作,字典,三级菜单实例

    字符串常用操作 7月19日,7月20日 ,7月22日,7月29日,8月29日,2月29日 首字母大写:a_str.capitalize() 统计字符串个数:a_str.count(“x”) 输出字符, ...

  8. Random类与Random方法

    class Test{ public static void main(String[] args){ int min=2; //定义随机数的最小值 int max=102; //定义随机数的最大值 ...

  9. 基于傅里叶变换的音频重采样算法 (附完整c代码)

    前面有提到音频采样算法: WebRTC 音频采样算法 附完整C++示例代码 简洁明了的插值音频重采样算法例子 (附完整C代码) 近段时间有不少朋友给我写过邮件,说了一些他们使用的情况和问题. 坦白讲, ...

  10. Http接口系列:如何提高Http接口用例的数据稳定性

    此文已由作者王婷英授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 为了尽可能多的释放手工测试,提高测试效率,我们都会想到使用自动化测试,如http接口自动化测试.doubbo ...