三、Store的简单实用
1、State
单一状态树，定义应用状态的默认初始值，页面显示所需的数据从该对象中进行读取。
Vuex使用单一状态树，用一个对象就包含了全部的应用层级状态。它便作为一个“唯一数据源”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。
- 单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
- 不可直接对
state进行更改，需要通过Mutation方法来更改。
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：
// 创建一个 Counter 组件 const Counter = { computed: { count () { return store.state.count } } }
每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：
配置State
<!-- 页面路径：store/index.js --> import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //vue的插件机制 const store= new Vuex.Store({ // store 相当于组件中的data,专门用来存放全局的数据 state:{ "name":"孙不坚1208", "age":18 }, getters:{ }, mutations:{ }, actions:{ }, modules:{ } }) export default store
获取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>
mapState
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>
const store = new Vuex.Store({ // 这里的state 就相当于组件中的data，用于专门保存共享数据的 state：{ msg } })
