Vuex根据state 生成 getters 、mutations

const state = {
  name:'',
  age:11
}
const _getters = {}
const _mutations = {}
for (let k in state) {
    _getters[k] = state => state[k]
      // mutation 以set开头加state名驼峰
    _mutations['set'+k.replace(/[a-z]/, (L) => L.toUpperCase())] = (state,payload)=>{
        state[k] = payload
    }
}
const actions = {
  action(context){
      context.commit('setName','TOM')
  }
}
const getters = {
  ... _getters,{getter1(){},getter2(){}}
}
const mutations = {
  ... _mutations,{mutation1(){},mutation2(){}}
}
const store = new Vuex.Store({
    state,getters,actions,mutations
})
export default store
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nuxt.js 是一个基于 Vue.js 的通用应用框架,它提供了一些特殊的功能,比如服务器端渲染(SSR),自动生成路由配置等等。Vuex 是 Vue.js 的状态管理库,可以方便地管理组件之间的状态。 在 Nuxt.js 中使用 Vuex 非常方便,只需要在 store 目录下创建一个 index.js 文件,然后在其中定义 statemutation、actiongetter 等等。 下面是一个简单的例子: // store/index.js export const state = () => ({ count: 0 }) export const mutations = { increment(state) { state.count++ } } export const actions = { increment(context) { context.commit('increment') } } export const getters = { getCount(state) { return state.count } } 然后,在组件中使用 Vuex 也非常简单,只需要使用 mapState、mapMutations、mapActions、mapGetters 等等工具函数,就可以方便地获取和修改状态了。 下面是一个简单的示例: // pages/index.vue <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { mapState, mapActions } from 'vuex' export default { computed: { ...mapState(['count']) }, methods: { ...mapActions(['increment']) } } </script> 这样,我们就可以在页面中显示当前的计数器,并且通过点击按钮来增加计数器的值。 总之,Nuxt.js 和 Vuex 都是非常强大的工具,它们可以帮助我们构建高性能的 Web 应用程序。如果你想要深入学习这些工具,建议你查看官方文档,或者参考一些优秀的教程和示例代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值