vuex学习笔记

一：第一步，先安装vuex，并且在项目中引用

安装：npm install vuex

然后在main.js中引入：

import Vuex from 'vuex'

Vue.use(Vuex)

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

new Vue({
    ...,
    store
})

二：定义自己所需的状态

state：state中应该存放所有今后需要的初始状态

mutations：mutations中定义的函数，是用来改变state中存放的状态（也可以称为变量），值得注意的是，mutations中的函数应该是同步函数，不能包含异步函数在里面，例如settimeout之类的函数不应该放入mutations函数中，虽然放入也不会报错，程序也能运行，但是在观察 devtool 中的 mutation 日志时，日志记录不了mutations的改变，不利于debug。

最简单的一个mutations改变state的例子：

<template>
  <div class="hello">
    <p>{{count}}</p>
    <input type="button" value="count++" @click="Add()">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome'
    }
  },
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    Add: function(){
      this.$store.commit('increment')
    }
  }
}
</script>

页面截图：

三：异步操作Action

action类似mutations，都是用于改变state状态，不同的是，虽然action能改变state状态，不过它是在自己函数内部引用了mutations的函数做到的。简而言之，要想改变state中的状态，只能由mutations内的函数来做，其他的一切都是为了能使mutations保持同步操作。

在store中加入：

actions: {
        increment(context) {
            setTimeout(function() {
                console.log("一个异步函数而已")
            }, 1000)
            context.commit('increment')
        }
    },

action触发函数为：

Add: function(){
      this.$store.dispatch('increment')
      //this.$store.commit('increment')
    }

可以发现效果和之前一样，只是1S后会在控制台多输出一句话而已。

四：getters

main.js中的store加入：

getters: {
        count: function(state) {
            return state.count
        }
    }

vue文件中加入：

computed: {
    ...mapGetters([
      'count',
    ])
  },

之后直接使用count就可以了，无论是在template或者script中使用都行，一般用getters取得state里面的数据。

五：module

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

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

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

这部分我基本没怎么用到过，所以直接取的官网的资料，不过把前面的弄懂之后，module这部分其实也是一样的，只是在调用时多了一个分类而已。
参考：https://vuex.vuejs.org/zh/guide/modules.html