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