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

vue

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 } 是什么?

第一个: storemain.jsstore,store是在main.js中注入的store,所有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就没有问题了。

以上是 vue+koa 美团实战之vue基础3:最简单的vuex入门 的全部内容, 来源链接: utcz.com/z/377664.html

回到顶部