欧耶娱乐
当前位置:首页 - 视频 >

vuex初级教程

2019-11-02来源:新闻快讯网科技

什么是Vuex?


vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。

为什么使用Vuex?


如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

vuex组成
state:
存放的数据状态


getters:

对state中的状态进行过滤处理

一般处理方法是:
computed: {


count(){    return this.$store.state.countNum.filter(todo => todo.done).length;
}

},
如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它 —— 无论哪种方式都不是很理想。

Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。就像计算属性一样,getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

Getters 接受 state 作为其第一个参数:
const store = new Vuex.Store({
 state: {


todos: [
  { id: 1, text: '...', done: true },
  { id: 2, text: '...', done: false }
]

},
 getters: {


doneTodos: state => {  return state.todos.filter(todo => todo.done)
}

}
})
Getters 会暴露为 store.getters 对象:

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Mutations:
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
mutation中写有修改数据的逻辑。

Actions:

Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。

代码示例:

代码总结构

action.js

mutation_type.js


mutations.js

store.js

最后在main.js中引入

页面使用
this.$store.state.countNum.xx//获取状态中的某个字段
this.$store.dispatch('action中的方法名' , '参数');//修改状态中的字段值

欢迎关注技术公众号:架构师成长营


转载文章地址:http://www.peripheralsurveys.com/shipin/23899.html
(本文来自欧耶娱乐整合文章:http://www.peripheralsurveys.com)未经允许,不得转载!
标签:
网站简介 联系我们 网站申明 网站地图

版权所有:www.peripheralsurveys.com ©2017 欧耶娱乐

欧耶娱乐提供的所有内容均是网络转载或网友提供,本站仅提供内容展示服务,不承认任何法律责任。