Vuex之State

Vuex是一个专门为Vue程序开发的状态管理模式。

store是Vuex的一个核心，你的应用的状态可通过Vuex在store中管理。但是与普通的对象又有区别，区别主要有以下两点：

Vuex的状态存储是响应式的。当组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件亦会得到通知，这可以与
computed很好的结合起来使用;
你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交（commit）mutation（通过action间接的提交mutation）。

最简单的`Store`

//如果在模块化构建系统中，请确保在开头调用Vue.use(Vuex)
const store = new Vuex.store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count ++
        }        
    }
})
//通过调用increment来实现state中count的状态变更
store.commit('increment');
//获取state
console.log(store.state.count)

实现Vue组件获取Vuex状态的方式

1. 直接访问store

//模块化构建系统需引入store
import store from 'vuex'
//创建一个Count组件
const Counter = {
    template: `<div>{{ count }}</div>`,
    computed: {
        count() {
            return store.state.count
        }
    }
}

这种方式存在的问题就是每一个需要使用store的组件都需要导入。

2. 通过store选项从根组件注入到所有的子组件

const app = new Vue({
    el: '#app',
    //把store对象复制给store属性，让所有的子组件共享同一store
    store,
    components: { Counter },
    template: `<div class="app">
        <counter></counter>
    </div>`
})
//counter的实现
//创建一个Count组件
const Counter = {
    template: `<div>{{ count }}</div>`,
    computed: {
        count() {
            //注意例一的实现为 return store.state.count 
            return this.$state.state.count
        }
    }
}

3. 通过mapState函数为组件生成计算属性

当一个组件需要从state获取多个状态的时候，将一个个状态赋值到计算属性中未免显得有些繁琐，Vuex为我们提供了mapState辅助函数来帮助我们赋值


//从vuex中获取mapState辅助函数
import { mapState } from 'vuex'
    
export default {
    //...
    computed: mapState({
        //将state的count赋值给计算属性myCount
        myCount: state => state.count,
        
        //传字符串参数等于获取state.count
        countAlias: 'count',
        
        //如果state中属性名与计算属性同名，可以使用简写。等效于 count: 'count'
        'count'
    })
}

4. 通过对象展开运算符混合组件本身的计算属性和mapSate

如果组件有自身的计算属性，怎么实现mapState与自身的计算属性混合呢？为避免手动合并两个对象，我们可以通过对象展开运算符来简化我们的写法