账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue vuex mapState 路由切换
    56
    0 
    A组件：
 getFruitData(){
             this.$http.get("../../../../static/fruit.json").then((res)=>{
               console.log(res);
                 var fruitData = res.data.data.fruitData;
                 this.sliderFruitData = fruitData.filter((item)=>{
                     return item.sliderImg === true
                 });
                 localStorage.setItem('fruitData', JSON.stringify(fruitData));
             })
         },
         getProDetail(proId){
           this.$router.push({ path: "B", query: { id: proId } });
         }
B组件：
created(){
       var currentId = parseInt(this.$route.query.id);
         console.log(this.fruitData);
         this.currentFruit = this.fruitData.filter((item)=>{
            return item.id === currentId   
         });
     },
     computed:{
         ...mapState([
                 'fruitData',
                 "carts"
     ])
     },
    mounted(){
         console.log(this.fruitData);
         this.cartLen = this.carts.length;
     }
vuex state.js
const state={
    fruitData:localStorage["fruitData"]?JSON.parse(localStorage["fruitData"]): [],
}

export default state

    A组件为商品列表，加载页面后调用接口，请求商品数据，然后把数据存储到localStorage,当我点击某一个商品时跳转到对应的B组件，这个时候我在B组件，通过vuex中的mapState获取到this.fruitData,然后通过路由参数筛选出对应的商品，最后渲染出来，现在的问题时当我在A组件点击某一个商品到B组件时，B组件并没有数据，刷新一下就有了，这里面是什么原因？是加载顺序的问题么？computed和mapState是在什么时候执行的呢？

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • ゛柠檬加醋 普通会员 1楼

      在Vue中，Vue Router库可以用于管理路由。如果你想在路由切换时，通过MapState将状态状态更改为新的状态，可以使用Vue Router的钩子函数。

      以下是一个简单的例子：

      首先，你需要安装Vue Router和MapState库：

      bash npm install vue-router vuex

      然后，你可以使用以下代码来实现你的需求：

      ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import MapState from 'vuex'

      Vue.use(VueRouter)

      export default new VueRouter({ routes: [ { path: '/example', component: ExampleComponent, state: { count: 0 } } ] })

      export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { incrementAction() { this.$store.dispatch('increment') } }, getters: { count(state) { return state.count } } })

      class ExampleComponent { state = { count: 0 }

      methods: { increment() { this.state.count++ } } } ```

      在这个例子中，我们创建了一个名为ExampleComponent的组件，并在其中定义了一个名为count的state状态。我们还定义了一个名为increment的方法，它会增加state.count的值。我们还定义了一个名为incrementAction的action，它会触发increment方法。

      在Vuex中，我们定义了一个名为store的store。store中有一个名为count的state状态，它被用来存储我们在组件中的状态。我们还定义了一个名为mutations的mutation，它会改变store中的state状态。我们还定义了一个名为actions的action，它会触发mutations和actions中的方法。

      我们还定义了一个名为getters的getter，它会获取store中的state状态。

      在ExampleComponent中，我们定义了一个名为state的state，它存储了我们的状态。我们还定义了一个名为methods的methods，它包含了一个名为increment的方法，它会增加state.count的值。

    0 打赏 回复
    • 等待你出现╮ 普通会员 2楼

      在Vue中，Vue Router库可以用于管理路由。如果你想在路由切换时，通过MapState将状态状态更改为新的状态，可以使用Vue Router的钩子函数。

      以下是一个简单的例子：

      首先，你需要安装Vue Router和MapState库：

      bash npm install vue-router vuex

      然后，你可以使用以下代码来实现你的需求：

      ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import MapState from 'vuex'

      Vue.use(VueRouter)

      export default new VueRouter({ routes: [ { path: '/example', component: ExampleComponent, state: { count: 0 } } ] })

      export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { incrementAction() { this.$store.dispatch('increment') } }, getters: { count(state) { return state.count } } })

      class ExampleComponent { state = { count: 0 }

      methods: { increment() { this.state.count++ } } } ```

      在这个例子中，我们创建了一个名为ExampleComponent的组件，并在其中定义了一个名为count的state状态。我们还定义了一个名为increment的方法，它会增加state.count的值。我们还定义了一个名为incrementAction的action，它会触发increment方法。

      在Vuex中，我们定义了一个名为store的store。store中有一个名为count的state状态，它被用来存储我们在组件中的状态。我们还定义了一个名为mutations的mutation，它会改变store中的state状态。我们还定义了一个名为actions的action，它会触发mutations和actions中的方法。

      我们还定义了一个名为getters的getter，它会获取store中的state状态。

      在ExampleComponent中，我们定义了一个名为state的state，它存储了我们的状态。我们还定义了一个名为methods的methods，它包含了一个名为increment的方法，它会增加state.count的值。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部