Vue.js-状态管理与Vuex

lykops 发布于2019-08-23 16:03 / 1649人阅读

摘要：学习笔记状态管理与状态管理与非父子组件跨级组件和兄弟组件通信时，使用了中央事件总线的一个方法，用来触发和接收事件，进一步起到通信的作用。仓库包含了应用的数据状态和操作过程。新建文件，并写入的配置，会依赖此配置文件来使用编译代码。

学习笔记：状态管理与Vuex

状态管理与Vuex

非父子组件（跨级组件和兄弟组件）通信时，使用了bus（中央事件总线）的一个方法，用来触发和接收事件，进一步起到通信的作用。

一个组件可以分为数据（model）和视图（view），数据更新时，视图也会自动更新。在视图中又可以绑定一个事件，它们触发methods里指定的方法，从而可以改变数据、更新视图，这是一个组件基本的运行模式。

const store = new Vuex.Store({});

仓库store包含了应用的数据（状态）和操作过程。Vuex里的数据都是响应式的，任何组件使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新。

数据保存在Vuex选项的state字段内。

const store = new Vuex.Store({
    state: {
        count: 0
    }
});

在任何组件内，可以直接通过$store.state.count读取。

直接卸载template里显得有点乱，可以用一个计算属性来显示：


    首页
    {{count}}


export default {
    computed: {
        count() {
            return $store.state.count;
        }
    }
}

在组件内来自store的数据只能读取，不能手动修改，修改store中数据的唯一途径是显式地提交mutations。

mutations是Vuex的第二个选项，用来直接修改state里的数据。

在组件内，通过this.$store.commit方法来执行mutations。

mutations还可以接受第二个参数，可以是数字、字符串或对象等类型。

ES6语法

函数的参数可以设定默认值，当没有传入该参数时，使用设置的值。

increment(state,n=1)等同于：
    increment(state,n){
        n=n||1;
    }

提交mutations的另一种方式是直接使用包含type属性的对象。

mutations里尽量不要异步操作数据，否则组件在commit后数据不能立即改变，而且不知道什么时候会改变。

高级用法

Vuex还有其他3个选项可以使用：getter、actions、modules。

getter能将computed的方法提取出来，也可以依赖其他的getter，把getter作为第二个参数。

action与mutation很像，不同的是action里面提交的是mutation，并且可以一步操作业务逻辑。

action在组件内通过$store.dispatch触发。

modules用来将store分割到不同模块，当项目足够大时，store里的state、getters、mutations、actions会非常多，使用modules可以把它们写到不同的文件中。

module的mutation和getter接收的第一个参数state是当前模块的状态。在actions和getters中还可以接收一个参数rootState，来访问根节点的状态。

实战：中央事件总线插件vue-bus

中央事件总线bus作为一个简单的组件传递事件，用于解决跨级和兄弟组件通信的问题。

vue-bus插件给Vue添加一个属性$bus，并代理$emit、$on、$off三个方法。

ES6语法

emit(event,..args)中的...是函数参数的解构。因为不知道组件会传递多少个参数进来，使用...args可以把从当前参数到最后的参数都获取到。

使用vue-bus有两点需要注意：

第一是$bus.on应该在created钩子内使用，如果在mounted使用，它可能接收不到其他组件来自created钩子内发出的事件；

第二点是使用了$bus.on在beforeDestroy钩子里应该再使用$bus.off解除，因为组件销毁后，就没有必要把监听的句柄存储在vue-bus中。

Vue插件

注册插件需要一个公开的方法install，它的第一个参数时Vue构造器，第二个参数是一个可选的选项对象。

See the Pen Vue插件 by whjin (@whjin) on CodePen.

$router还有其他一些方法：

replace 类似于的replace功能，它不会向history添加新纪录，而是替换掉当前的history记录，如this.$router.replace("/user/123")

go 类似于window.history.go()，在history记录中向前或后退多少步，参数是整数

高级用法

在SPA项目中，如何修改网页的标题？

在页面发生路由变化时，统一设置。

vue-router提供了导航钩子beforeEach和afterEach，它们会在路由即将改变前和改变后触发，所以设置标题可以在beforeEach钩子完成。

See the Pen vue-router导航钩子 by whjin (@whjin) on CodePen.

新建.babelrc文件，并写入babel的配置，webpack会依赖此配置文件来使用babel编译ES6代码。

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"],
  "comments": false
}

每个.vue文件代表一个组件，组件之间可以相互依赖。

ES语法：

=>是箭头函数

render: h=>h(App)等同于
    render: function(h) {
        return h(App)
    }
    
也等同于：
    render: h=>{
        return h(App)
    }

箭头函数里的this指向与普通函数不一样，箭头函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象。

GPU云服务器云服务器 Vue.js 状态管理 vue.js 属性 vue.js自学

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102655.html

Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fai1017 2019-08-30 13:53 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

zilu 2019-08-26 11:35 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fjcgreat 2019-08-01 18:30 评论0 收藏0
Vue.js状态管理模式 Vuex

摘要：是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。通过方法触发在内部执行异步操作对象形式传参以载荷形式分发 showImg(https://segmentfault.com/img/bVDxBu?w=701&h=551); vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理...

Codeing_ls 2019-08-23 11:38 评论0 收藏0