参考：https://www.jb51.net/article/188121.htm
一、各个模块的作用：
state 用来数据共享数据存储
mutation 用来注册改变数据状态（同步）（改变state只能通过mutation）
getters 用来对共享数据进行过滤并计数操作
action 解决异步改变共享数据（异步）
二、 创建文件：
actions.js
getters.js
index.js
mutations.js
mutation-types.js
state.js
三、编辑文件
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger' // vuex调试工具
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'prodycution' // 开发环境下开启严格模式
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug,
plugins: debug ? [createLogger()] : []
})
state.js
const state = {
editProduct:{}
}
export default state
mutation-types.js
export const SET_EDIT_PRODUCT ="SET_EDIT_PRODUCT"
mutations.js
使用mutation-types.js的话是为了方便管理,想一下，一大堆的功能模块混合在一起，那得是多糟糕啊，当然也可以不用。
import * as types from './mutation-types'
const mutaions = {
[types.SET_EDIT_PRODUCT](state,info){
state.editProduct = info
}
}
export default mutaions
getters.js
export const getGditProduct = state => state.editProduct
actions.js
//处理异步的方法
四、使用
改变state里的值 我们直接使用mutations 方法去改变 因为是同步的，这里用到了辅助函数mapMutations
import {mapMutations} from 'vuex'
methods:{
...mapMutations({
'setEditProduct': 'SET_EDIT_PRODUCT'
})
//使用辅助函数
editProductHandle(res){
this.setEditProduct(res)
}
//不用辅助函数
editProductHandle(res){
this.$store.commit('SET_EDIT_PRODUCT',res)
}
}
获取getters里的值
import { mapGetters } from 'vuex' //这里我们使用辅助函数来获取getters里的值
export default {
computed:{ //getters.js是计算属性我们放到计算属性里
...mapGetters([
//把 `this.getEditProduct` 映射为 `this.$store.getters.getEditProduct`
'getEditProduct'
])
},
created(){
//mapState方式
this.name=this.getEditProduct.name
//如果我们不用辅助函数 mapGetters 直接使用
this.name=this.$store.state.getEditProduct.name
}
}
注意：以上用到了辅助函数
1、mapState mapGetters mapMutations mapActions 这些都是
state getters mutations actions 对应的辅助函数
2、前两个辅助函数都放到computed里、后两个辅助函数放到method里
3、辅助函数起到映射的作用 举个例子 一下是 mapActions 的用法，其他的辅助函数用法同理 可以查看官方文档https://vuex.vuejs.org/zh/guide/state.html
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
}
