vuex的封装和使用

作者: 看庭前花开花落_望天上云卷云舒 | 来源:发表于2020-11-16 14:53 被阅读0次

vuex的封装和使用
vuex的使用封装
vuex与axios的优化写法
封装单独的登录接口(token存储的问题)
2021-09-07 字典数据vuex
Vue总结第一篇
vuex使用和规范
pinia2入门使用
04 Vue中组件通信(下)
Vuex

参考：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')`
    })
  }
}