vue+koa 美团实战之vue基础3:最简单的vuex入门
Vuex
vuex的执行流程
- 用户操作,使用dispatch触发actions
- actions通过commit提交操作到mutations
- mutations方法该表state的数据
- 然后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的数据。
- { commit }是es6的结构赋值
- 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>
这里有几个问题如下:
- {{$store.state.count}}是什么?
- { 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
}
})
这里解释几点:
- a.js 和 b.js 分别输出两个对象, 内部有namespace的命名空间
- 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