三、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>
复制代码
<!-- 页面路径：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>
复制代码
<!-- 页面路径：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 }})
复制代码
评论