vue+koa 美团实战之vue基础3:最简单的vuex入门

Vuex

vuex的执行流程

1. 用户操作，使用dispatch触发actions
2. actions通过commit提交操作到mutations
3. mutations方法该表state的数据
4. 然后render到组件

用法

安装vuexnpm i vuex --save

创建store.js，文件内容如下:

第一步: 引入和使用

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

第二步: 分别定义state，mutations，actions

const state = {
    count: 1
}

const mutations = {
  increment(state) {
    state.count ++
  },
  decrement(state) {
    state.count --
  }
};

mutations 里面的方法, 对应的就是对state数据的操作

const actions = {
  increment: ({ commit }) => {
    commit('increment')
  },
  decrement: ({ commit }) => {
    commit('decrement')
  }
}

actions 里面的的方法,和mutations里面的差不多。但是，他不能直接操作state的数据。

1. { commit }是es6的结构赋值
2. commit(‘increment’)和commit(‘decrement’)是提交操作的, 对应的是mutations里面的方法。

第三步，该js默认输出的是一个Vuex.store的函数。

    export default new Vuex.store({
        state, 
        mutations,
        actions
    })

到这里，store的文件就基本完成了, 完成代码如下:

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

Vue.use(Vuex);

const state = {
  count: 1
};

const mutations = {
  increment(state) {
    state.count ++
  },
  decrement(state) {
    state.count --
  }
};

const actions = {
  increment: ({ commit }) => {
    commit('increment')
  },
  decrement: ({ commit }) => {
    commit('decrement')
  }
}

export default new Vuex.store({
  state,
  mutations,
  actions
})

那么如何使用？

第一步: 在main.js中引入，并且注入到vue的实例当中。

import store from './store'
new Vue({
  router,
  store
}).$mount('#app')

第二步: 在组件中使用。

新建一个vuex的组件，内容如下:

<template lang="html">
  <div class="">
    {{$store.state.count}}
    <button type="button" name="button"  @click="increment">增加</button>
    <button type="button" name="button"  @click="decrement">增加</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  methods: mapActions([
    'increment',
    'decrement'
  ])
}
</script>

这里有几个问题如下:

1. {{$store.state.count}}是什么？
2. { mapActions } 是什么？

第一个: $store是在main.js中注入的store,所有$store.state.count 实际上就是在store.js中写的数据。

第二个: mapActions

mapActions辅助函数将组件的方法映射为store.dispatch调用
也就是相当于调用了this.$route.dispatch(‘increment’)

@click=“increment” 也就意味着调用了actions里面的方法，触发了mutaitons，然后，改变count的数据渲染后到页面。

---

如何使用多个state存储数据?

现在想实现一个小例子,有两个state, 分别存入money, 有一个初始值是10, 有一个初始值是100, 分别添加增加和减少的按钮, 方法都叫add 和 reduce.

要如何实现呢？

首先, 创建一个store文件夹, 内部一个module文件夹, 在module文件夹新建a.js,用来存放stateA, b.js 存放stateB。
然后有个和module问价夹同级别文件, index文件, 用于输出Vuex.store实例.

a.js文件内容如下:

const state = {
  money: 1
};

const mutations = {
  add(state) {
    state.money ++
  },
  reduce(state) {
    state.money --
  }
};

const actions = {
  add: ({commit}) => {
    commit('add')
  },
  reduce: ({commit}) => {
    commit('reduce')
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

b.js文件内容如下：

const state = {
  money: 10
};

const mutations = {
  add(state) {
    state.money ++
  },
  reduce(state) {
    state.money --
  }
};

const actions = {
  add: ({commit}) => {
    commit('add')
  },
  reduce: ({commit}) => {
    commit('reduce')
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

index.js 文件如下：

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

import money from './module/a.js';
import count from './module/b.js';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    money,
    count
  }
})

这里解释几点:

1. a.js 和 b.js 分别输出两个对象, 内部有namespace的命名空间
2. index.js 使用vuex.Store的实例, 导出module的模块

到这里，已经实现的store的编码。

name如何使用呢？

新建a.vue 和 b.vue, 代码如下

a.vue

<template lang="html">
  <div class="">
    pageA {{$store.state.money.money}}
    <button type="button" name="button" @click="add">增加</button>
    <button type="button" name="button" @click="reduce">减少</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  methods: mapActions('money', ['add', 'reduce'])
}
</script>

<style lang="css">
</style>

b.vue

<template lang="html">
  <div class="">
    pageA {{$store.state.count.money}}
    <button type="button" name="button" @click="add">增加</button>
    <button type="button" name="button" @click="reduce">减少</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  methods: mapActions('count', ['add', 'reduce'])
}
</script>

<style lang="css">
</style>

这里要注意methods的写法，
在index.js里面, 输出的事money模块和count的模块。
这里a.vue使用methods: mapActions('money', ['add', 'reduce'])
b.vue使用methods: mapActions('count', ['add', 'reduce'])

这样，在其他页面调用pageA 和 pageB就没有问题了。