Vuex通俗易懂

',//动作响应用户在视图上输入引起的状态变化。methods:{increment(){this.count++}}})什么是“状态管理模式”？让我们从一个简单的Vue计数应用程序开始：conststore=newVuex.Store({//有什么状态state:{count:0},actions:{incrementAction(store){store.commit('increment')}},//change，可以调用这个change方法来修改state的值mutations:{increment(state){//这里第一个方法是state，我们可以直接修改state.count++}}})这个state是自管理的应用程序由以下部分组成：状态，驱动应用程序的数据源；视图，以声明方式将状态映射到视图；动作，响应用户在视图上输入引起的状态变化。然而，当我们的应用程序遇到多个组件共享状态时，单向数据流的简单性很容易被打破：多个视图依赖于同一个状态。来自不同视图的操作需要改变相同的状态。对于问题1，传递参数的方法对于多层嵌套的组件来说会很繁琐，而且对于兄弟组件之间的状态传递也无能为力。对于问题二，我们经常使用父子组件直接引用或者使用事件来改变和同步多份状态。上面的这些模式非常脆弱，通常会导致代码无法维护。那么，为什么我们不把组件的共享状态抽取出来，用全局的单例模式来管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，无论在树的哪个位置，任何一个组件都可以获得状态或者触发行为！此外，通过定义和隔离状态管理中的各种概念并强制执行某些规则，我们的代码将变得更加结构化和可维护。这就是Vuex背后的基本思想。我应该什么时候使用Vuex？Vuex在帮助我们管理共享状态的同时，也带来了更多的概念和框架。这需要在短期利益和长期利益之间进行权衡。如果您不打算开发大型单页应用程序，使用Vuex可能会很乏味且多余。这是真的——如果你的应用足够简单，你最好不要使用Vuex。您只需要一个简单的全局事件总线。但是，如果你需要构建一个中大型的单页应用，你很可能会考虑如何在组件外部更好地管理状态，而Vuex将是一个自然而然的选择。VuexDiagramBackendAPI：BackendAPIActions：响应用户在视图上输入引起的状态变化的行为。Mutations：突变，突变，通俗的理解，它包含了改变数据的方法的集合。这是Veux设计的一个很重要的点，就是把所有处理数据的逻辑方法都放在mutation中，让数据和视图分离。状态：Vuex使用单个状态树——是的，一个包含整个应用程序级状态的对象。在这一点上，它作为“单一真相来源（SSOT）”存在。这也意味着每个应用程序将只包含一个商店实例。VueComponents:Vue的组件Devtools:ToolMutate:Mutation，相当于修改Render:Provided，针对Commit的问题**为什么不能直接调用mutation方法，而是必须通过commit提交mutation？官方解释：在Vuex的store中改变状态的唯一方法是提交一个mutation。Vuex中的突变与事件非常相似：每个突变都有一个字符串事件类型（type）和一个回调函数（handler）。这个回调函数是我们实际进行状态更改的地方，它接受状态作为第一个参数：conststore=newVuex.Store({state:{count:1},mutations:{increment(state){//Mutationstatestate.count++}}})您不能直接调用突变处理程序。这个选项更像是事件注册：“当增量类型的突变触发时，调用这个函数。"要唤醒一个mutationhandler，需要调用对应类型的store.commit方法：store.commit('increment')VueComponents—{Dispatch(incoming)}—>Actions—{Commit(submission)}-->Mutations—{Mutate(修改)}—>State—{Render(响应)}-->VueComponentsState：相当于组件中的数据，用于存储值。getter:相当于vue中的computedActions:相当于vue中的methodsconststore=newVuex.Store({//状态是什么states:{count:3},//相当于statecomputedpropertygetters:{evenOrOdd:state=>{returnstate.count%2===0?'even':'odd'}},actions:{//可以包含异步代码incrementAction(store,amount){store.commit('increment',amount)},decrement({commit}){commit('decrement')}},//改变，可以调用这个改变方法来修改state的值mutations:{increment(state,amount){//里面的第一个方法方法是state，我们可以直接修改state.count+=amount},decrement(state){state.count--}}})varapp=newVue({el:"#app",computed:{counter(){returnstore.state.count},evenOrOdd(){returnstore.getters.evenOrOdd}},方法:{add(){store.dispatch('incrementAction',5)},decrement(){store.dispatch('decrement')}}})