目录结构：
index.js // 在很多处被命名为store.js
import Vue from ‘vue‘
import Vuex from ‘vuex‘
import * as actions from ‘./actions‘
import * as getters from ‘./getters‘ // 就是获取state中状态，仅单向的获取数据，不做任何修改
import state from ‘./state‘ // 相当于数据库,定义了应用数据的数据结构及初始状态
import mutations from ‘./mutations‘ // 定义state数据的修改操作
import createLogger from ‘vuex/dist/logger‘ // 修改记录日志
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== ‘production‘ // 在开发环境下使用debug
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug,
plugins: debug ? [createLogger()] : []
})
效果一：叠加
1-1、普通方法实现
State.js // 定义常量
const state = {
starNum: 1 // 初识值
}
export default state
Mutations.js // 定义方法
const mutations = {
// 方法1：
add: state => state.starNum++
// 方法二：
add (state) {
state.starNum++
}
}
export default mutations
界面
方法一：在html中直接使用vuex中的方法
<template>
<div>
{{$store.state.starNum}} // 显示当前starNum
<button @click="$store.commit(‘add‘)">+</button> // 运用add方法
</div>
</template>
<script type="text/ecmascript-6">
import store from‘store/index‘
export default {
store
}
</script>
方法二：利用方法
<template>
<div>
{{$store.state.starNum}} // 显示当前starNum
<button @click="add()">+</button> // 运用add方法
</div>
</template>
<script>
import store from ‘store/index‘
export default {
methods: {
add () {
// 写法一： store.commit(‘add‘)
// 写法二： return this.$store.commit(‘add‘)
}
},
store
}
</script>
1-2、利用mutations-types实现
State.js // 定义常量
const state = {
starNum: 1 // 初识值
}
export default state
mutations-types.js // 定义方法名
export const ADD = ‘ADD‘ // 叠加方法
Mutations.js // 定义方法
import * as types from ‘./mutation-types‘// 获取mutation-types内定义的常量
const mutations = {
[types.ADD]: state => state.starNum++
}
export default mutations
页面
<template>
<div>
{{$store.state.starNum}}
<button @click="addNum()">+</button>
</div>
</template>
<script type="text/ecmascript-6">
import {mapMutations} from ‘vuex‘
export default {
methods: {
...mapMutations({
addNum: ‘ADD‘
})
}
}
</script>
效果二、带参数的叠加
State.js // 定义常量
const state = {
starNum: 1 // 初识值
}
export default state
mutations.js // 定义方法名
const mutations = {
add (state, n) {
state.starNum += n
}
｝
界面
方法一：$store.commit
<template> <div> {{$store.state.starNum}} // 显示当前starNum <button @click="add()">+</button> // 运用add方法 </div> </template> <script> import store from ‘store/index‘ export default { methods: { add () { // 写法一： store.commit(‘add‘, 4) // 写法二： return this.$store.commit(‘add‘, 10) } }, store } </script>
方法二：mapMutations
<template>
<div>
{{$store.state.starNum}}
<button @click="addNum()">+</button>
</div>
</template>
<script>
import {mapMutations} from ‘vuex‘
export default {
methods: {
...mapMutations({
addNum: ‘add‘
})
}
}
</script>
