浅谈vuex

什么是vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应
用的所有组件的状态，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更
新。并以相应的规则保证状态以一种可预测的方式发生变化。
借鉴了Flux、Redux、 The Elm Architecture
一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的状态 (state)。

4.Vuex 也集成到 Vue 的官方调试工具https://github.com/vuejs/vue-devtools

2019-03-25_161324.png

什么情况下应该使用 Vuex？

不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的组件通信。
适用于：如果状态较多的项目都会用到Vuex，更加的方便，如果组件嵌套层级过深、多个组件依赖了同一个状态，那么必然要使用Vuex更加的方便

其实在实际开发的项目中，都是Vuex和组件通信混合的

安装：

npm install vue
npm install vuex

使用：

1.引入vue              import Vue from "vue"
2.引入vuex             import Vuex from "vuex"
3.                     Vue.use(Vuex)
4.定义一个容器          const store=new Vuex.Store({ // （注意）：在应用中是唯一的，只能定义一个
                  
                       })  
5.记住一定得导出        export default store
6.注意还得把自定义的store注入到Vue的根实例中也就是main.js中      new Vue({
                                                                  el: '#app',
                                                                  router,
                                                                  store,
                                                                  components: { App },
                                                                  template: ''
                                                               })

核心概念：

Store

相当于一个容器，里面包含了应用的大部分的状态（state）
状态存储只能是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会得到高效更新。

State

state为vuex的状态存储，vuex 的状态存储是响应式的，应用中的大部分状态都存储在state中

//在state中定义状态
const store = new Vuex.Store({
  state: {
    shopList:[
           {
              id：1,
              count:1,
              price:￥12,
              name:'鱼香肉丝'
           },
           {
              id：2,
              count:3,
              price:￥10,
              name:'大盘鸡'
           },
           {
              id：3,
              count:3,
              price:￥20,
              name:'煎饼果子'
           },
       ]    // 这里的 shopList 就是状态，之前称之为数据  （数据 === 状态）
  }
})

//( 要使用的时候 )  在要使用定义的状态的组件中
//通过计算属性（computed）去获取仓库中定义的数据
computed: {
    getShopList () {
      return this.$store.state.shopList
    }
  }

Getter

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数：

const store = new Vuex.Store({
//State
  state: {
    shopList:[
           {
              id：1,
              count:1,
              price:￥12,
              name:'鱼香肉丝'
           },
           {
              id：2,
              count:3,
              price:￥10,
              name:'大盘鸡'
           },
           {
              id：3,
              count:3,
              price:￥20,
              name:'煎饼果子'
           },
       ]    // 这里的 shopList 就是状态，之前称之为数据  （数据 === 状态）
  }
})
//Getters
 getters:{
    //总价
    totalPrice (state) {
      let price=0
      state.ShopList.map(item=>{
        price+=item.price*item.count
      })
      return price
    }
}
})


//通过计算属性（computed）去获取仓库中定义的数据
computed: {
    getShopList () {
      return this.$store.state.shopList
    },
   getTotalPrice(){
      return this.$store.getters
   }
  }

Mutation

更改 Vuex 的 store 中的状态（state）的唯一方法是通过commit提交 mutation

//在组件中
this.$store.commit('addIncrement', 5)
const store = new Vuex.Store({
//State
  state: {
    shopList:[
        //同上
       ]    // 这里的 shopList 就是状态，之前称之为数据  （数据 === 状态）
  }
})
//Mutations
  mutations:{
       addIncrement(state,5){
      
            //操作逻辑    

         }
  }
//Getters
   getters:{
       //同上
   }
})

Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
让我们来注册一个简单的 action：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

通过computed取值的时候需要加上子模块的名称，除此之外都无需添加子模块名称

详解请到Modules