vuex入门安装vuex为我们提供了两种使用方式，直接导入vuex下载地址：https://unpkg.com/vuex@2.0.0下载后使用<脚本>标记package导入并打包它模式npminstallvuex--save在模块化打包系统中，你必须显式地通过Vue.use()安装Vuex：importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)当使用全局脚本标签引用Vuex时，不需要上述安装过程。一开始vuex是什么？Vuex是一种状态（数据）管理工具。每个vuex都有一个store（仓库）。store是一个容器，它包含了你应用程序中的大部分状态（state）。Vuex和纯全局对象有两个区别：1.Vuex的状态存储是响应式的。当Vue组件从store中读取状态时，如果store中的状态发生变化，相应的组件将相应地高效更新。2.您不能直接在商店中更改状态。更改存储中状态的唯一方法是显式提交更改。这使我们能够轻松跟踪每个状态变化，使我们能够实施一些工具来帮助我们更好地理解我们的应用程序。用来创建vuexvarstore=newVuex.store({//数据放在statestate:{msg:1},//newmethodmutations:{//es6writingjia(state){state.msg++}}})//在突变中调用“jia”方法store.commit("jia")//检查数据状态console.log(store.state.msg)同样，我们提交突变而不是直接改变store.state。计数，因为我们想更明确地跟踪状态变化。这种简单的约定可以让你的意图更加明显，这样当你阅读代码时，你可以更容易地解读应用程序内部的状态变化。此外，这也让我们有机会实现一些可以记录每一次状态变化并保存状态快照的调试工具。有了它，我们甚至可以实现穿越的调试体验。使用上面我们已经在组件中创建了vuex，那么在组件中如何使用呢？我们只需要在组件中使用计算属性rutern输出store.state.msg，触发变化就是在methods中提交mutation.varvm=newVue({el:"#box"components:{home:{计算：{msg(){returnstore.state.msg}},template:`
{{msg}}
`,methods:{jia:function(){store.commit("jia")}}}}})核心概念state单状态树Vuex使用单状态树——是的，一个包含整个应用程序的对象——水平状态。到目前为止，它作为“单一数据源(SSOT)”存在。这也意味着每个应用程序将只包含一个商店实例。单个状态树允许我们直接定位任何特定的状态片段，并在调试期间轻松获取整个当前应用程序状态的快照。单状态树与模块化并不冲突——我们将在后面的章节中讨论如何跨子模块分布状态和状态更改事件。在组件computed中获取状态state:{msg(){returnstore.state.msg}}，因为我们已经在根实例中注册了store，所以我们也可以使用computed这样的写法：{msg(){返回这个。$store.state.msg}}，这样在模块化构建系统中，我们不需要在每个需要使用状态的组件中频繁导入，也不需要在测试组件时mock状态。mapState辅助函数当组件需要获取多个状态时，将这些状态声明为计算属性有些重复和多余。为了解决这个问题，我们可以使用mapState辅助函数来帮助我们生成计算属性，省去按几个键的麻烦：computed:mapState({//箭头函数可以让代码更简洁msg:state=>state.msg,})对象展开运算符mapState函数返回一个对象。我们如何将它与本地计算属性混合？对象展开运算符可以使用计算将mapstate与本地计算属性混合：{localComputed(){/*...*/},//使用对象展开运算符将此对象混合到外部对象中...mapState({//...})}组件仍然保持本地状态使用Vuex并不意味着您需要将所有状态放入Vuex。虽然将所有状态放在Vuex中使状态更改更加明确且更易于调试，但它也使代码冗长且不直观。如果某些状态严格属于单个组件，最好将其保留在组件本地。您应该根据您的应用程序开发需求进行权衡并确定。核心概念gettersgetters可以说是store的计算属性。它可以接受state作为第一个参数，其他的getters作为第二个参数进行计算，这样我们就可以在多个组件中使用这个gtters，而不用在每个组件中都写。.varstore=newVuex.store({//数据放在状态state:{msg:1},//新方法mutations:{//es6writingjia(state){state.msg++}},getters:{jiajia(state){state.msg+5}}})同样，vuex也为我们定义了mapGetterscomputed：{//使用对象扩展操作符将getter混合到计算对象中...mapGetters(['jiajia',])}核心概念mutations改变Vuexstore状态的唯一方法是提交mutation。Vuex中的突变与事件非常相似：每个突变都有一个字符串事件类型（type）和一个回调函数（handler）。这个回调函数是我们真正改变状态的地方，它会接受状态作为第一个参数：mutations:{//es6写jia(state){state.msg++}}，你可以提交负载（Payload）到store.commit额外传入一个参数，即突变的payload：mutations:{increment(state,n){state.msg+=n}}对象式提交另一种提交突变的方式是直接使用includeObjectwithtypeattribute:store.commit({type:'increment',amount:10})当使用object-stylecommit方法时，整个对象作为payload传递给mutationfunction，所以handler保持不变:mutations:{increment(state,payload){state.msg+=payload.amount}}核心概念actionsAction与mutation类似，不同的是：Action提交mutation而不是直接改变state。动作可以包含任意异步操作。让我们注册一个简单的动作：conststore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count++}},actions:{increment(context){context.commit('increment')}}})Action函数接受一个上下文对象，该对象具有与商店实例相同的方法和属性，因此您可以调用context.commit来提交突变，或获取状态和获取器。后面我们介绍Modules的时候，你就会知道为什么context对象不是store实例本身。在实践中，我们经常使用ES2015参数解构来简化代码（尤其是当我们需要多次调用commit时）：actions:{increment({commit}){commit('increment')}}
