vuex

电玩女神 2023-06-05 08:50 12阅读 0赞

什么是vuex

vuex是Vue.js应用程序的状态管理模式+库。他充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行变更。它还于vue的官方devtools扩展继承，以提供零配置时间旅行调试和状态快照导出/导入等高级功能

优势

1.vuex的存储状态是响应式

2. 他是所有组件的状态集合

如何使用vuex

1.下载vuex  npm i vuex -S

什么情况下使用vuex？

1. 不适用：小型简单的应用，用vuex是繁琐冗余的，跟适合使用简单的store模式

2. 适用于：中大型单页面应用，你可能会考虑如何把组件的共享状态抽取出来，以一个全局单例模式管理，不管在那个组件，都能获取状态/触发行为，解决问题如下：

（1）多个视图使用于同一状态：

传参的方法对于对层嵌套的组件将会非常繁琐，并且对于兄弟组件的状态传递无能为力

（2）不同视图需要变更同一状态：

采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

使用

（1）使用介绍

1.搭建store实例

①.再创建vuex实例的地方引入vue，vuex，使用vuex：

![1483907-20190820194504736-733381397.png][]

②. 如果你的actions中用到 store.dispath() ,要引入store

![1483907-20190820194653453-160826870.png][]

③. new 一个 Vuex.Store 实例，并注册 state、mutations、actions、getters到 Vuex.Store 实例中

![1483907-20190820194905057-699757179.png][]

ps. 你可以像上面那样将“属性和值”直接写在实例中，当代码量大时，你也可以分别写个.js文件，如下图：

![1483907-20190820195038801-894107845.png][]

2.创建好 vuex.store 后，你需要在入口文件 main.js 中引入 store 并注册到 vue 实例中，这样就可以在任何组件使用store了：

![1483907-20190820195341776-114226598.png][]

vuex的五大核心

总结

state => 基本数据   
　　　　getters => 从基本数据派生的数据   
　　　　mutations => 提交更改数据的方法，同步！   
　　　　actions => 像一个装饰器，包裹mutations，使之可以异步。   
　　　　modules => 模块化Vuex

1.state

在vue组件中获得vuex属性  通过vue的computed获得vuex的state

![1483907-20190820201039002-242377314.png][]

每当 `store.state.count` 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

mapState辅助函数

当一个组件需要获取多个动态时候，将这些状态都声明为计算属性会有一些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性，让你少按几次键。

![1483907-20190820201616016-650975324.png][]

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

![1483907-20190820201716800-1311954587.png][]

getters

![1483907-20190820201945676-2144582486.png][]

与state一样，我们也可以通过Vue的`Computed`获得Vuex的getters。

#### ![1483907-20190820202035436-1936489107.png][] ####

## mutations ##

![1483907-20190820202103339-1471340049.png][]

### actions ###

![1483907-20190820202133668-1053658207.png][]

## Modules ##

![1483907-20190820202204816-2025878132.png][]

转载于:https://www.cnblogs.com/jiangningjn/p/11385380.html

[1483907-20190820194504736-733381397.png]: /images/20230601/2de68312f9a3423193a9f84eee75b777.png
[1483907-20190820194653453-160826870.png]: /images/20230601/5db739288d594889b97adf0deac97d1c.png
[1483907-20190820194905057-699757179.png]: /images/20230601/763f7255ad1c4f89940ac2c4a65b010b.png
[1483907-20190820195038801-894107845.png]: /images/20230601/40c3ca38eff04e888b98a9f591eecc65.png
[1483907-20190820195341776-114226598.png]: /images/20230601/01d4f695a8384adc8e4058960d6c5168.png
[1483907-20190820201039002-242377314.png]: /images/20230601/07d89e2b544544bb93520bf8ff7699ca.png
[1483907-20190820201616016-650975324.png]: /images/20230601/60031a51837b4836b13ef32852f966d9.png
[1483907-20190820201716800-1311954587.png]: /images/20230601/0bc19c58e64b4cfb97baee562681bcc2.png
[1483907-20190820201945676-2144582486.png]: /images/20230601/d868e9a315a84d1c9663be7248a7f33b.png
[1483907-20190820202035436-1936489107.png]: /images/20230601/d5fe469d594447c49c21449347f3c216.png
[1483907-20190820202103339-1471340049.png]: /images/20230601/8bd4750695b843ceb01625359bb1ea0c.png
[1483907-20190820202133668-1053658207.png]: /images/20230601/5053427535214eb8917b8ccfa0f51905.png
[1483907-20190820202204816-2025878132.png]: /images/20230601/53047cb2c2f44e53b33a2a9839dcde00.png