[TOC] >[参考](https://uniapp.dcloud.io/vue-vuex) ## vuex ### 优势与使用场景 1. Vuex的状态存储是响应式的，可跟踪每一个状态变化，一旦它改变，所有关联组件都会自动更新相对应的数据。 2. 共享数据，解决了非父子组件的消息传递（将数据存放在state中）。 3. 统一状态管理，减少了请求次数，有些情景可以直接从内存中的state获取数据。 示例 1.在 uni-app 项目根目录下，新建 store 目录，在此目录下新建 index.js 文件。在 index.js 文件配置如下 ``` <!-- 页面路径：store/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`中导入文件。 ``` <!-- 页面路径：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 。 ``` <!-- 页面路径：pages/index/index.vue --> <template> <view> <text>用户名：{{username}}</text> </view> </template> <script> import store from '@/store/index.js';//需要引入store export default { data() { return {} }, computed: { username() { return store.state.username } } } </script> ``` 2. 在组件中使用，通过 this.$store 访问到 state 里的数据。 ``` <!-- 页面路径：pages/index/index.vue --> <template> <view> <text>用户名：{{username}}</text> </view> </template> <script> export default { data() { return {} }, computed: { username() { return this.$store.state.username } } } </script> ``` 3. 通过 mapState 辅助函数获取。 - 当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。 为了解决这个问题，我们可以使用 mapState 辅助函数 帮助我们生成计算属性，让你少按几次键： ``` <!-- 页面路径：pages/index/index.vue --> <template> <view> <view>用户名：{{username}}</view> <view>年龄：{{age}}</view> </view> </template> <script> import { mapState } from 'vuex'//引入mapState export default { data() { return {} }, computed: mapState({ // 从state中拿到数据 箭头函数可使代码更简练 username: state => state.username, age: state => state.age, }) } </script> ``` - 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。 ``` <!-- 页面路径：pages/index/index.vue --> <template> <view> <view>用户名：{{username}}</view> <view>年龄：{{age}}</view> </view> </template> <script> import { mapState } from 'vuex'//引入mapState export default { data() { return {} }, computed: mapState([ 'username',//映射 this.username 为 store.state.username 'age', ]) } </script> ``` - 为了能够使用 this 获取组件自己的data数据，必须使用常规函数。 ``` <!-- 页面路径：pages/index/index.vue --> <template> <view> <view>用户名：{{username}}</view> <view>年龄：{{age}}</view> </view> </template> <script> import { mapState } from 'vuex'//引入mapState export default { data() { return { firstName:"Li" } }, computed: { ...mapState({ username: function (state) { return this.firstName + ' ' + state.username }, age: state => state.age, }) }, } </script> ``` - 使用对象展开运算符 mapState 函数返回的是一个对象。使用对象展开运算符将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。极大地简化写法： ``` <!-- 页面路径：pages/index/index.vue --> <template> <view> <view>用户名：{{username}}</view> <view>年龄：{{age}}</view> </view> </template> <script> import { mapState } from 'vuex'//引入mapState export default { data() { return {} }, computed: { //使用对象展开运算符将此对象混入到外部对象中 ...mapState({ username: state => state.username, age: state => state.age, }) }, } </script> ```