VUE中的VUEX如何调用modules里面的mutations和state

在这里插入图片描述

项目场景:

当vue中的store被分为modules时,如何获取到modules里的mutations或state
在这里插入图片描述


使用方式:

在这里插入图片描述

1.1moudles里的文件,配置namespaced属性

在这里插入图片描述

1.2、在store的index.js中引入

在这里插入图片描述
在这里插入图片描述

2.1 在vue单页面中引入

<script>
import { mapState, mapMutations } from "vuex";
</script>

2.2 在vue单页面中使用mutations

methods: {
    ...mapMutations("forecastBoyAndGirl", ["SET_bowserType"]),
  },

在这里插入图片描述

this.SET_bowserType()

2.3 在vue单页面中使用state

computed: {

    ...mapState("forecastBoyAndGirl", {
      bowserType: (state) => {
        return state.bowserType;
      },
      isIosMoveBack: (state) => {
        return state.isIosMoveBack;
      },
    }),
    
  },

this.bowserType
this.isIosMoveBack

  • 7
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue使用Vuex,你需要按照以下步骤进行设置: 1. 安装Vuex:在项目根目录下执行以下命令安装Vuex依赖: ``` npm install vuex ``` 2. 创建store:在项目的src目录下创建一个名为store的文件夹,然后在该文件夹创建一个名为index.js的文件。index.js文件是Vuex的核心文件,用于创建和配置store。 3. 在index.js导入VueVuex,并使用Vue.use(Vuex)注册Vuex插件。然后创建一个新的Vuex store实例: ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // 在这里定义你的statemutations、actions等 }) export default store ``` 4. 在main.js导入store并将其作为Vue实例的一个选项: ```javascript import Vue from 'vue' import App from './App.vue' import store from './store' new Vue({ store, render: h => h(App) }).$mount('#app') ``` 5. 在store文件夹创建statemutations和actions等模块,以及需要存储的数据和对数据进行操作的方法。例如,你可以在index.js定义一个名为counter的模块: ```javascript const counter = { state: { count: 0 }, mutations: { increment(state) { state.count++ }, decrement(state) { state.count-- } }, actions: { increment(context) { context.commit('increment') }, decrement(context) { context.commit('decrement') } } } export default new Vuex.Store({ modules: { counter } }) ``` 6. 现在你可以在Vue组件使用Vuex了。你可以通过计算属性computed和方法methods来访问store的状态或触发mutations和actions。例如,你可以在组件使用以下代码: ```javascript <template> <div> <p>{{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> </template> <script> export default { computed: { count() { return this.$store.state.counter.count } }, methods: { increment() { this.$store.dispatch('counter/increment') }, decrement() { this.$store.dispatch('counter/decrement') } } } </script> ``` 这样就完成了在Vue使用Vuex的设置。你可以根据自己的需求来定义和使用Vuex的模块、状态、mutations和actions等。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值