松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › Vue进阶篇-Vue的大型数据中心vuex

Vue进阶篇-Vue的大型数据中心vuex

迦娜王
3年前Vue
557 0 0
Vue进阶篇-Vue的大型数据中心vuex

vue在进行组建开发过程中,本组建直接操作数据实现数据绑定,父子组件传递通过传参和外传方式传递,在多层组件和同级组件开发过程中,小范围数据状态管理使用vue-bus,或者直接自行建立一个全局变量进行操作。vue的数据通信有时候还是很令人崩溃的。 在进行更大范围vue状态管理或者数据管理时,就可以使用vuex,官方提供的vue集中式状态管理工具了。所以,如果你的应用很简单,就不要用vuex。

安装使用

直接使用命令进行安装 npm install vuex –save 然后在main.js中加入包的使用:

import vuex from \'vuex\'
Vue.use(vuex);
var store = new vuex.Store({//store对象
 state:{
 count:0
 }
})
new Vue({
 el: \'#app\',
 router,
 store,//使用store
 template: \'\',
 components: { App }
})

然后就可以在需要的地方使用 $store.state.count 了。 当然这是最最简单的应用,数据模块拆分比较多,想看起来结构清晰的话,也可以进行拆分,拆分之前,先理解了解下vuex里面的核心概念。

核心概念

任何状态管理或者数据存储的工具,无非就是分为把数据存进去的过程,数据本身,数据输出展示过程,vuex也不例外。上个图,可能跟想象的不太一样

Vue进阶篇-Vue的大型数据中心vuex

存储过程: Actions,数据存储进去的前置,操作Mutation,可忽略。 Mutation,唯一可以直接操作State的部分。 数据本身: State,就属于存储的数据本身了。 Getter,State数据本身可以通过计算进行衍生的数据。 数据取出展示: 数据取出部分就直接在需要的板块进行使用就可以了。通常会在组件的计算属性computed中可以进行进一步过滤操作,然后输出到页面上来。 其他: Module,vuex由于使用的是单一状态数结构,数据较多时,进行模块拆分时使用。对应里面的所有的部分 state,getter,action,mutation都可以拆分到模块里面去。 了解完核心概念之后,针对复杂应用,我们就可以把store拆掉了。在src文件夹下面新建store文件夹,下方将vuex的每个模块都进行拆分,因为每个模块都有可能会有一大堆数据。

import Vue from \'vue\'
import Vuex from \'vuex\'
import state from \'./state\'
import mutations from \'./mutations\'
import add from \'./module/add\'
Vue.use(Vuex)
export default new Vuex.Store({
	state,
	mutations,
	modules: {
		a:add
	}
})

对应main.js的引用就变化了。

import store from \'./store\'
new Vue({
 el: \'#app\',
 router,
 store,//使用store
 template: \'\',
 components: { App }
})

对应的文件结构就变成如下

Vue进阶篇-Vue的大型数据中心vuex

下面是里面细节板块的使用了。

State

state属于数据中心,内容来源数据初始化,变更来自于mutations,读取的话,通常使用computed属性进行读取。state里面内容变更后会触发计算属性重新获取,并且同步渲染到页面中。

// 创建一个 Counter 组件
const Counter = {
 template: `
{{ count }}
`,
 computed: {
 count () {
 return this.$store.state.count
 }
 }
}

多条state读取的时候,引入mapState辅助函数。使用之前要import。 然后在需要的时候直接引入一个数组。

computed: {
 ...mapState([\'count\'])
}

如果引入的元素需要过滤的话,就可以单独处理。 这里要提供一个初始化时候来源数据,可以拓展很多东西,比如来自localStage,database等等。

Getter

Getter是State元素的派生元素。跟vue里面的computed功能差不多。某些通过计算或者过滤State里面的元素就可以得到的元素,就可以直接使用getter来生成。 举个例子,在State里面存储了一堆学生的成绩,这个时候,就可以使用getter设置计算出对应学生的个数,成绩的总和,平均值,几个及格,几个优秀。在添加新的学生成绩之后,对应的这些数值就都会同步的进行刷新。 当然,上面问题会有很多中方式解决这种问题,上面只是举个这个例子。下面代码的案例就todolist案例,state中只存储所有的数据,对应的过滤元素都可以在getter中取得,代码中放一个计算属性是doneTodos就是过滤之后的元素,在展示的时候,直接使用就可以了 设置方法:

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)
 }
 }
})

在使用的时候,同State类似,直接使用this.$store.getters.doneTodos,就可以了。 getter取值的时候,也可以传递参数进去。

getters: {
 // ...
 getTodoById: (state) => (id) => {
 return state.todos.find(todo => todo.id === id)
 }
}
store.getters.getTodoById(2) // -> { id: 2, text: \'...\', done: false }

这里,针对访问多个计算属性getter也有一个辅助函数,mapGetters。使用方法类似,也要先引用,后加入computed

export default {
 // ...
 computed: {
 // 使用对象展开运算符将 getter 混入 computed 对象中
 ...mapGetters([
 \'doneTodosCount\',
 \'anotherGetter\',
 // ...
 ])
 }
}

Mutation

Mutation是同步操作state改变唯一的区域,这里操作state中间再去操作点其他事情就看你自己了,比如变化同步写入localstage,方便浏览器刷新,state取默认值的时候,就可以使用本地数据了,达到优化体验的效果。 基本用例:

const store = new Vuex.Store({
 state: {
 count: 1
 },
 mutations: {
 increment (state, n) {
 // 变更状态
 state.count  = n
 }
 }
})
store.commit(\'increment\',n)

提交的方法可以增加参数,参数就参数,官方非要起个载荷(Payload)的名字,不知道为啥。 需要注意的是,mutations必须是同步的操作。 不过,在mutation里面执行异步操作会怎么样呢?好像也没有发生什么奇怪的事情。官方是建议这么做了。

Action

在进行多个mutation操作state时,维护起来比较麻烦,就用到了action的功能。action操作的是mutation,而且是可以包含任意的异步操作。

const store = new Vuex.Store({
 state: {
 count: 0
 },
 mutations: {
 increment (state) {
 state.count  
 }
 },
 actions: {
 increment (context) {
 context.commit(\'increment\')
 }
 }
})

同样,action也有对应的mapAction辅助函数,功能一样的。

Module

各种方法,生成,数据较多的时候,方便管理就可以使用Module进行模块的拆分。

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
}
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
}
const store = new Vuex.Store({
 modules: {
 a: moduleA,
 b: moduleB
 }
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

不过,getter,action,mutation默认情况下都是注册在全局命名下。同名的方法在不同模块下调用,会整体进行响应。然后可以通过namespaced: true,和root:true在模块命名的时候全局的变局部的,局部里面声明全局的,来回折腾。

{
 actions: {
 someOtherAction ({dispatch}) {
 dispatch(\'someAction\')
 }
 },
 modules: {
 foo: {
 namespaced: true,
 actions: {
 someAction: {
 root: true,
 handler (namespacedContext, payload) { ... } // -> \'someAction\'
 }
 }
 }
 }
}
computed: {
 ...mapState({
 a: state => state.some.nested.module.a,
 b: state => state.some.nested.module.b
 })
},
methods: {
 ...mapActions([
 \'some/nested/module/foo\', // -> this[\'some/nested/module/foo\']()
 \'some/nested/module/bar\' // -> this[\'some/nested/module/bar\']()
 ])
}

由于这一块儿我也没用过,你自行理解吧。更多的还有涉及到动态注册、模块重用等等,插件编写等等。 整个介绍完之后放上官方推荐的文件结构,购物车的例子

|── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
 ├── index.js # 我们组装模块并导出 store 的地方
 ├── actions.js # 根级别的 action
 ├── mutations.js # 根级别的 mutation
 └── modules
 ├── cart.js # 购物车模块
 └── products.js # 产品模块

vue-devtools

vue开发强烈推荐使用的浏览器插件工具。尤其可以看到vuex里面这些元素的变化。并且每一步操作之前产生的影响都可以直观的看出来。回头单独介绍安装使用截图等。

文末

到这里,差不多vuex常用的东西都介绍完了。这个能大致了解,就可以去通读vuex的官方文档了。还是要强调,如果你涉及到的数据量比较小,状态管理的东西较少,就不建议使用vuex了。


0
vue整体框架和主要流程分析,让你从原理上掌握vue,入木三分
上一篇
Vue PC后台系统组件大全,值得收藏
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top