vuex有使用过吗

1. 安装 vuex

cnpm install vuex --save

2. 在使用 vuex 开发的时候使用的比较繁琐，我们单独起一个文件夹
src/stroe/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    'title': '技术博客',
    'count': 1
  }
})

3. 我们在入口文件中 main.js 进行挂在

import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

state 的用法
4. 我们已经在 state 中定义了一个变量，官方里 state 中定义的就是我们公用的变量，但他们都调用 count 这个变量，我们可以这么写

<template>
  <div>
    <button class="btn" @click="handleClick">{{this.$store.state.count}}</button>
  </div>
</template>

5. 这里我们需要点击 btn 的时候修改 count 变量，在我们第一张图中介绍，当我们需要修改变量的时候需要需要 dispatch 派发到 Actions 中进行，在有 Actions 出发 commit 方法将数据提交到 Mutations 中进行处理，vuex 遵循单一原则直接上代码

<template>
  <div>
    <button class="btn" @click="handleClick">{{this.$store.state.count}}</button>
  </div>
</template>

<script>
export default {
  name: 'Testvuex',
  methods: {
    handleClick () {
      this.$store.dispatch('changeCount')
    }
  }
}
</script>

<style scoped lang="stylus">
  .btn
    width :100%
    height :3rem
</style>

我们需要在 store/index.js 来定义 actions

actions: {
    // ctx上下文
    changeCity (ctx, city) {
    //  actions如果调用mutations使用commit方法
      ctx.commit('changeCity', city)
    },
    changeCount (ctx) {
      ctx.commit('countIncrease')
    }
  },

通过 actions 来接受 commit 传过来的值，在有 commit 传递给 mutations 进行数据的处理

mutations: {
    countIncrease (state) {
      state.count++
    }
  }

我们点击按钮 count 变量 ++ 完成，基本的 vuex 流程就完成了