Vuex && Vue

最新推荐文章于 2024-09-30 16:19:08 发布

龙拳蜗牛

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量128

点赞数

分类专栏： Vuex 文章标签： vue.js

本文链接：https://blog.csdn.net/Ton555555/article/details/105955387

版权

Vuex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用步骤

第一步 npm

挂载

new Vue({
    router,
    store,
    render: (h) => h(App)
}).$mount('#app')

第二步新建store文件夹下 index.js

模拟传递 info 所以先在 state 下写下info 字段

import Vue from 'vue'
import Vuex from 'vuex'

import integral from './modules/integral'
import ADbanner from './modules/ADbanner'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    integral,
    ADbanner,
  },
  state: {
    *info: ''*,
  },
  mutations: {
    SETINFO: (state, payload) => {
      state.info = payload.info
      console.log(payload.info)
    },
  },
  actions: {
    setInfo: (context, payload) => {
      context.commit('SETINFO', payload)
    },
  },
})

export default store

第三步 mutations传值(规范 mutations 和 action 重名函数大写)

mutations: {
       SETINFO: (state, payload) => {
      state.info = payload.info
      console.log(payload.info)
    },
  },

在Vue中触发

当前组件引入:   组件中局部引入 就用store 去点   不然 全局就是 this.$store  
import store from '@/store'
触发: 
store.commit('setInfo', this.match_title)

第四步使用辅助函数 …mapMutations …mapActions

引入辅助函数
import { mapMutations, mapActions } from 'vuex'
在methods中 使用:  此处  我是用  actions  去出发mutations  里面的函数
 methods: {
    ...mapActions(['setInfo']),
}
store 中的  函数 已经被映射过来 , 我们使用直接可以  this.fun()
this.setInfo({ info: this.match_title })