vuex基础详解

vuex入门

安装

vuex为我们提供了两种使用方法

直接引入

vuex下载地址:https://unpkg.com/vuex@2.0.0

下载之后用< script >标签包裹引入即可

打包的模式

npm install vuex --save

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。

开始

vuex是什么?

vuex就是一个状态(数据)管理工具,每一个vuex都有一个store(仓库),store是一个容器,它包含着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不同:

1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

使用

创建vuex

var store = new Vuex.store({
    // 数据放在state中
    state:{
        msg:1
    },
    // 新建方法
    mutations:{
        // es6 写法
        jia(state){
            state.msg++
        }
    }
})

// 调用mutation中的"jia"方法
store.commit("jia")
// 查看数据状态
console.log(store.state.msg)

再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。

在组件中使用

上面我们已将vuex创建,那么如何在组件中进行使用呢?
我们只需要在组件中利用计算属性rutern出store.state.msg即可,触发变化也只是在methods里面提交mutation.

var vm = new Vue({
    el:"#box"
    components:{
        home:{
            computed:{
                msg(){
                    return store.state.msg
                }
            },
            template:`  <div>
                            {{msg}}
                            <input type="button" @click="jia" value="+"/>
                        </div>`,
            methods:{
                jia:function(){
                    store.commit("jia")
                }
            }
        }
    }
    
})

核心概念 state

单一状态树

Vuex 使用 单一状态树 —— 是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

单状态树和模块化并不冲突 —— 在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。

在组件中获取state状态

computed:{
    msg(){
        return store.state.msg
    }
},

因为我们在根实例已经注册了store,所以我们也可以使用这种写法

computed:{
    msg(){
        return this.$store.state.msg
    }
},

这样我们在模块化的构建系统中，在每个需要使用 state 的组件中就不需要频繁地导入，并且在测试组件时不需要模拟状态。

mapState 辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

computed: mapState({
    // 箭头函数可使代码更简练
    msg: state => state.msg,
})    

对象展开运算符

mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？

对象展开运算符可以将mapstate与局部计算属性混合使用

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

组件仍然保有局部状态

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

核心概念 getters

getters可以说是store的计算属性,它可以接受state作为第一参数和其他getters作为第二参数来进行计算,这样我们就可以在多个组件使用这个gtters而不必在每一个组建都书写一遍.

var store = new Vuex.store({
    // 数据放在state中
    state:{
        msg:1
    },
    // 新建方法
    mutations:{
        // es6 写法
        jia(state){
            state.msg++
        }
    },
    getters:{
       jiajia(state){
           state.msg+5
       } 
    }
})

同样,vuex也为我们定义了mapGetters

computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
      'jiajia',
    ])
  }

核心概念 mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

mutations:{
    // es6 写法
    jia(state){
        state.msg++
    }
},

提交载荷（Payload）

你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：

mutations: {
  increment (state, n) {
    state.msg += n
  }
}

对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
  type: 'increment',
  amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

mutations: {
  increment (state, payload) {
    state.msg += payload.amount
  }
}

核心概念 actions

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 实例本身了。

实践中，我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}