vuex
最后更新于：2022-04-02 03:37:07
[TOC]
>[参考](https://uniapp.dcloud.io/vue-vuex)
## vuex
### 优势与使用场景
1. Vuex的状态存储是响应式的，可跟踪每一个状态变化，一旦它改变，所有关联组件都会自动更新相对应的数据。
2. 共享数据，解决了非父子组件的消息传递（将数据存放在state中）。
3. 统一状态管理，减少了请求次数，有些情景可以直接从内存中的state获取数据。
示例
1.在 uni-app 项目根目录下，新建 store 目录，在此目录下新建 index.js 文件。在 index.js 文件配置如下
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);//vue的插件机制
//Vuex.Store 构造器选项
const store = new Vuex.Store({
state:{//存放状态
"username":"foo",
"age":18
}
})
export default store
```
2.在`main.js`中导入文件。
```
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.prototype.$store = store
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
const app = new Vue({
store,
...App
})
app.$mount()
```
## 获取state三种方式
1.通过属性访问，需要在根节点注入 store 。
```
用户名：{{username}}
```
2. 在组件中使用，通过 this.$store 访问到 state 里的数据。
```
用户名：{{username}}
```
3. 通过 mapState 辅助函数获取。
- 当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。 为了解决这个问题，我们可以使用 mapState 辅助函数 帮助我们生成计算属性，让你少按几次键：
```
用户名：{{username}}
年龄：{{age}}
```
- 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
```
用户名：{{username}}
年龄：{{age}}
```
- 为了能够使用 this 获取组件自己的data数据，必须使用常规函数。
```
用户名：{{username}}
年龄：{{age}}
```
- 使用对象展开运算符
mapState 函数返回的是一个对象。使用对象展开运算符将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。极大地简化写法：
```
用户名：{{username}}
年龄：{{age}}
```
';