Vue框架（四）

最新推荐文章于 2022-08-11 09:29:02 发布
最新推荐文章于 2022-08-11 09:29:02 发布
阅读量203 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Li5306/article/details/119738232
版权

一、状态管理

<body>
  
  <div id='app'></div>

  <div></div>
  <div></div>
</body>

 

  • 3个组件App,box,son都渲染count数据.count写在哪个组件上
  •     当count变化时,3个组件同时更新视图. => 状态管理 => 应该把数据放到3个组件的共同祖先组件上
  •     状态管理
  •     什么叫状态? => 状态就是响应式数据和呈现它的视图.
  •     组件的状态是由它的数据和视图决定的.
  •     状态管理 => 数据和视图管理.
  •     状态管理 => 如何实现多个组件共用一个状态?
  •     1:把数据和修改数据的逻辑都放在某个祖先组件上.子孙组件触发祖先组件的修改逻辑.
  •     2:Vuex.(Vue的插件 => Vue的全局状态管理)

Vue代码。 

const box = {
      template: `
        <div>
          <h3>box组件---{{count}}</h3>
          <button @click='$emit("setcount")'>box--count++</button>
        </div>
      `,
      props: ['count']
    }
const son = {
      template: `
        <div>
          <h3>son组件---{{count}}</h3>
          <button @click='$emit("setcount")'>son--count++</button>
        </div>
      `,
      props: ['count']
    }
const App = {
      template: `
        <div id='app'>
          <h3>App组件{{count}}</h3>
          <button @click='setCount'>App--count++</button>
          <box :count='count' @setcount='setCount' />
          <son :count='count' @setcount='setCount' />
        </div>
      `,
      data() {
        return {
          count: 0
        }
      },
      components: { box, son },
      methods: {
        setCount() {
          this.count++;
        }
      }
    }
new Vue({
      el: '#app',
      components: {App},
      template: `<App />`
    })

二、组件的data为什么必须是一个函数

<body>
  
  <div id='app'></div>

  <div></div>
  <div></div>
</body>

 

 同一个组件，复用多次，它的状态应该是独立。

    组件的data写成函数，则组件每次复用，组件的data函数都会重新调用返回。

    每次重新调用都返回一个新的的对象。每个新的对象内都有独立数据，独立数据对应独立的状态。

    组件的data为什么必须是函数 => 因为组件的状态应该是相互独立。组件复用时，函数返回新的对象，新的对象对应新的状态。

const box = {
      template: `
        <div>
          <h3>box组件---{{count}}</h3>
          <button @click='count++'>box--count++</button>
        </div>
      `,
      data() {
        // return obj
        return {
          count: 0
        }
      }
    }

    const App = {
      template: `
        <div id='app'>
          <h3>App组件</h3>
          <box/>
          <box/>
          <box/>
        </div>
      `,
      components: { box }
    }

    new Vue({
      el: '#app',
      components: {App},
      template: `<App />`
    })

三、$forceUpdate  

<body>
  
  <div id='app'></div>

  <div></div>
  <div></div>
</body>
<script src="js/vue.js"></script>
  <script>  

    // 改了数据视图不变.

    const App = {
      template: `
        <div id='app'>
          <h3>App组件</h3>
          {{arr[0]}}
          <button @click='fn'>按钮</button>
        </div>
      `,
      data(){
        return {
          arr:[111, 222, 333]
        }
      },
      methods: {
        fn() {
          this.arr[0] = 88888;
          // 强制更新当前组件.(应急性api,不推荐滥用).
          this.$forceUpdate();
        }
      }
    }

    new Vue({
      el: '#app',
      components: {App},
      template: `<App />`
    })

  </script>

四、$children和$parent 

<body>
  
  <div id='app'></div>

  <div></div>
  <div></div>
</body>

 

<script src="js/vue.js"></script>
  <script>  

    // 改了数据视图不变.

    const box = {
      template: `
        <div>
          <h3>box组件{{count}}</h3>
          <button @click='fn'>把count给父组件</button>
        </div>
      `,
      data() {
        return { count: 100 }
      },
      methods: {
        fn() {
          // 在子组件中修改父组件的数据
          // $parent => 当前组件的父组件.(应急性api)
          this.$parent.count = this.count;
        }
      }
    }

    const App = {
      template: `
        <div id='app'>
          <h3>App组件--{{count}}</h3>
          <button @click='fn'>按钮</button>
          <box />
        </div>
      `,
      data(){
        return {
          count: 200
        }
      },
      methods: {
        fn() {
          // this.$children => 当前父组件的子组件.(是一个数组)(应急api)
          // this.$children[0].count = this.count;
          // 触发子组件的fn方法
          this.$children[0].fn();
        }
      },
      components: { box }
    }

    new Vue({
      el: '#app',
      components: {App},
      template: `<App />`
    })

  </script>

五、$refs 

<body>
  
  <div id='app'></div>

  <div></div>
  <div></div>
</body>

 

<script src="js/vue.js"></script>
  <script>  

    // refs => 用来获取视图标签的。

    const box = {
      template: `
        <div>
          <h3 ref='h22222'>box组件{{count}}</h3>
          <button @click='fn'>把count给父组件</button>
        </div>
      `,
      data() {
        return { count: 100 }
      },
      methods: {
        fn() {
          const [oH3] = document.querySelectorAll('h3');
          oH3.style.backgroundColor = 'red';

          // 获取ref属性的值是h2222的那个标签.
          console.log(this.$refs.h22222);
          // DOM操作修改背景色.
          this.$refs.h22222.style.backgroundColor = 'red';
        }
      }
    }

    const App = {
      template: `
        <div id='app'>
          <h3>App组件--{{count}}</h3>
          <button @click='fn'>按钮</button>
          <box ref='box' />
        </div>
      `,
      data(){
        return {
          count: 200
        }
      },
      methods: {
        fn() {
          // 如果给组件添加了ref,则可以通过这个ref获取到指定的组件.
          // console.log(this.$refs.box).

          // 获取box组件的count数据.(子传父).
          this.count = this.$refs.box.count;
        }
      },
      components: { box }
    }
    
    new Vue({
      el: '#app',
      components: {App},
      template: `<App />`
    })

  </script>

六、vuex实现状态管理 

<body>
  
  <div id='app'></div>
</body>

 状态管理 => 如何实现多个组件共用一个状态.

    1:多个组件共享一个数据.

    2:这个数据变化,则多个组件需要同时更新视图.

    状态管理

    1:把数据和修改数据的逻辑放在父组件上.子组件通过props获取父组件数据,再通过自定义事件触发父组件修改数据的逻辑.

    2:Vuex插件实现.(全局状态管理).

    Vuex的插件4xx版本是为了配合Vue3xx版本.

    Vue的版本如果是2xx,则Vuex的版本应该是用3xx

    Vuex如何实现

    01:如何实例化Vuex数据仓库.(用于存放数据和修改数据的逻辑)

    02:组件如何获取Vuex的数据

    03:组件如何修改Vuex的数据

    04:如何把Vuex的数据和逻辑映射成组件的数据和逻辑

    实例化一个数据仓库.实例化之后,还需要挂载到Vue实例上.

    挂载到new Vue上，就是全局的状态管理。所有的组件，都可以访问到state内的数据。

    如果挂载到指定的组件A上,则组件A以及组件A的所有子孙组件，都可以访问到state内的数据。

<script src="js/vue.js"></script>
  <!-- vuex是vue的插件,需要在引入完成Vue后再引入Vuex -->
  <script src="js/vuex.js"></script>
  <script>  

    const store = new Vuex.Store({
      // 多个组件共用的状态.(数据)
      state: {
        count: 0
      }
    })

    const box = {
      template: `
        <div>
          <h3>box组件---{{count}}</h3>
          <button @click='$emit("setcount")'>box--count++</button>
        </div>
      `,
    }

    const son = {
      template: `
        <div>
          <h3>son组件---{{count}}</h3>
          <button @click='$emit("setcount")'>son--count++</button>
        </div>
      `,
    }

    const App = {
      template: `
        <div id='app'>
          <h3>App组件{{count}}</h3>
          <button @click='setCount'>App--count++</button>
          <box />
          <son />
        </div>
      `,
      data() {
        return {
          count: 0
        }
      },
      components: { box, son },
      methods: {
        setCount() {
          this.count++;
        }
      }
    }

    new Vue({
      el: '#app',
      components: {App},
      template: `<App />`,
      // store: store
      store
    });

  </script>

七、组件获取Vuex的数据 

<body>
  
  <div id='app'></div>
</body>

 实例化一个数据仓库.实例化之后,还需要挂载到Vue实例上.

    挂载到new Vue上，就是全局的状态管理。所有的组件，都可以访问到state内的数据。

    如果挂载到指定的组件A上,则组件A以及组件A的所有子孙组件，都可以访问到state内的数据。

    挂载完成后,就可以通过Vuex的实例store来访问state内的数据。

    vue组件内可以通过this.$store来获取这个state的实例。

<script src="js/vue.js"></script>
  <!-- vuex是vue的插件,需要在引入完成Vue后再引入Vuex -->
  <script src="js/vuex.js"></script>
  <script>  

    const store = new Vuex.Store({
      // 多个组件共用的状态.(数据)
      state: {
        count: 10000
      }
    });

    const box = {
      template: `
        <div>
          <h3>box组件---{{count}}</h3>
          <button>box--count++</button>
        </div>
      `,
      computed: {
        count() {
          return this.$store.state.count
        }
      },
    }

    const son = {
      template: `
        <div>
          <h3>son组件---{{$store.state.count}}</h3>
          <button>son--count++</button>
        </div>
      `,
    }

    const App = {
      template: `
        <div id='app'>
          <h3>App组件{{$store.state.count}}</h3>
          <button>App--count++</button>
          <box />
          <son />
        </div>
      `,
      components: { box, son },
    }

    new Vue({
      el: '#app',
      components: {App},
      template: `<App />`,
      // store: store
      store
    });

  </script>

八、组件如何修改Vuex的数据 

<body>
  
  <div id='app'></div>
</body>

实例化一个数据仓库.实例化之后,还需要挂载到Vue实例上.

    挂载到new Vue上，就是全局的状态管理。所有的组件，都可以访问到state内的数据。

    如果挂载到指定的组件A上,则组件A以及组件A的所有子孙组件，都可以访问到state内的数据。

    挂载完成后,就可以通过Vuex的实例store来访问state内的数据。

    vue组件内可以通过this.$store来获取这个state的实例。

    修改state数据的逻辑，需要通过mutations选项写在数据仓库中，可以写多个方法.

    mutations内的方法的第一个参数是state对象,第二个参数是组件传递的参数.

    组件触发mutations内的方法,需要同this.$store.commit来触发.

    commit('mutation的方法名', 组件实参);

 

<script src="js/vue.js"></script>
  <!-- vuex是vue的插件,需要在引入完成Vue后再引入Vuex -->
  <script src="js/vuex.js"></script>
  <script>  

    const store = new Vuex.Store({
      // 多个组件共用的状态.(数据)
      state: {
        count: 10000
      },
      // 修改state内数据的逻辑.
      mutations: {
        // count+1
        plus(state, num) {
          state.count += num;
        },
        // count-1
        reduce(state, num) {
          state.count -= num
        }
      }
    });

    const box = {
      template: `
        <div>
          <h3>box组件---{{count}}</h3>
          <button @click='$store.commit("plus", 1)'>box--count++</button>
          <button @click='$store.commit("reduce", 1)'>box--count--</button>
        </div>
      `,
      computed: {
        count() {
          return this.$store.state.count
        }
      },
    }

    const son = {
      template: `
        <div>
          <h3>son组件---{{count}}</h3>
          <button @click='$store.commit("plus", 2)'>son--count++</button>
          <button @click='$store.commit("reduce", 2)'>son--count--</button>
        </div>
      `,
      computed: {
        count() {
          return this.$store.state.count
        }
      },
    }

    const App = {
      template: `
        <div id='app'>
          <h3>App组件{{count}}</h3>
          <button @click='$store.commit("plus", 3)'>App--count++</button>
          <button @click='$store.commit("reduce", 3)'>App--count--</button>
          <box />
          <son />
        </div>
      `,
      components: { box, son },
      computed: {
        count() {
          return this.$store.state.count
        }
      },
    }

    new Vue({
      el: '#app',
      components: {App},
      template: `<App />`,
      // store: store
      store
    });

  </script>

九、组件异步修改vuex数据 

<body>
  
  <div id='app'></div>
</body>

实例化一个数据仓库.实例化之后,还需要挂载到Vue实例上.

    挂载到new Vue上，就是全局的状态管理。所有的组件，都可以访问到state内的数据。

    如果挂载到指定的组件A上,则组件A以及组件A的所有子孙组件，都可以访问到state内的数据。

    挂载完成后,就可以通过Vuex的实例store来访问state内的数据。

    vue组件内可以通过this.$store来获取这个state的实例。

    修改state数据的逻辑，需要通过mutations选项写在数据仓库中，可以写多个方法.

    mutations内的方法的第一个参数是state对象,第二个参数是组件传递的参数.

    组件触发mutations内的方法,需要同this.$store.commit来触发.

    commit('mutation的方法名', 组件实参);

    commit内是不能有异步操作的.

    如果有异步操作的需求,需要通过actions来实现

    actions方法内触发mutations方法.

    actions的触发方式是dispatch.

    dispatch('actions的方法名', 组件实参);

 

<script src="js/vue.js"></script>
  <!-- vuex是vue的插件,需要在引入完成Vue后再引入Vuex -->
  <script src="js/vuex.js"></script>
  <script>  

    const store = new Vuex.Store({
      // 严格模式.禁止在mutations之外修改state.
      // 如果在mutations之外修改state,会报这个错[vuex] do not mutate vuex store state outside mutation handlers.
      strict: true,
      // 多个组件共用的状态.(数据)
      state: {
        count: 10000
      },
      // 修改state内数据的逻辑.
      mutations: {
        // count+1
        plus(state, num) {
          state.count += num
        },
        // count-1
        reduce(state, num) {
          state.count -= num
        }
      },
      // 异步触发mutations
      actions: {
        asyncPlus(store, num) {
          // 2秒后触发mutations的plus方法修改state。
          setTimeout(() => {
            store.commit("plus", num);
          }, 2000);
        }
      }
    });

    const box = {
      template: `
        <div>
          <h3>box组件---{{count}}</h3>
          <button @click='$store.dispatch("asyncPlus", 1)'>box--count++</button>
          <button @click='$store.commit("reduce", 1)'>box--count--</button>
        </div>
      `,
      computed: {
        count() {
          return this.$store.state.count
        }
      },
    }

    const son = {
      template: `
        <div>
          <h3>son组件---{{count}}</h3>
          <button @click='$store.dispatch("asyncPlus", 2)'>son--count++</button>
          <button @click='$store.commit("reduce", 2)'>son--count--</button>
        </div>
      `,
      computed: {
        count() {
          return this.$store.state.count
        }
      },
    }

    const App = {
      template: `
        <div id='app'>
          <h3>App组件{{count}}</h3>
          <button @click='$store.dispatch("asyncPlus", 3)'>App--count++</button>
          <button @click='$store.commit("reduce", 3)'>App--count--</button>
          <box />
          <son />
        </div>
      `,
      components: { box, son },
      computed: {
        count() {
          return this.$store.state.count
        }
      },
    }

    let vm = new Vue({
      el: '#app',
      components: {App},
      template: `<App />`,
      // store: store
      store
    });

  </script>

十、Vuex的数据流 

Vuex(状态管理)的原理

  Vuex的数据流

  Vuex是如何让多个组件同时更新的?

  实例化Vuex的过程中,Vue会给state内的数据都添加数据劫持.

  通过挂载store实例,就可以知道当state内的数据变化时,应该更新多少个组件.(收集依赖).

  每当state内的数据变化，都会更新对应组件的视图.

  组件按钮 => actions(dispatch) => mutations(commit) => state => 自动通知对应的视图更新.

 

十一、辅助函数mapState 

<body>
  
  <div id='app'></div>
</body>

以上这些方法,都是返回纯对象的.

    mapState(['count', 'msg']) => { count() {} , msg() {}}

    实例化一个数据仓库.实例化之后,还需要挂载到Vue实例上.

    挂载到new Vue上，就是全局的状态管理。所有的组件，都可以访问到state内的数据。

    如果挂载到指定的组件A上,则组件A以及组件A的所有子孙组件，都可以访问到state内的数据。

    挂载完成后,就可以通过Vuex的实例store来访问state内的数据。

    vue组件内可以通过this.$store来获取这个state的实例。

    修改state数据的逻辑，需要通过mutations选项写在数据仓库中，可以写多个方法.

    mutations内的方法的第一个参数是state对象,第二个参数是组件传递的参数.

    组件触发mutations内的方法,需要同this.$store.commit来触发.

    commit('mutation的方法名', 组件实参);

    commit内是不能有异步操作的.

    如果有异步操作的需求,需要通过actions来实现

    actions方法内触发mutations方法.

    actions的触发方式是dispatch.

    dispatch('actions的方法名', 组件实参);

    map映射：

    1:把state的数据变成组件数据.

    2:把mutations和actions的方法变成组件方法.

 

 

<script src="js/vue.js"></script>
  <!-- vuex是vue的插件,需要在引入完成Vue后再引入Vuex -->
  <script src="js/vuex.js"></script>
  <script>

    const { mapState, mapMutations, mapActions }  = Vuex;

      strict: true,
      // 多个组件共用的状态.(数据)
      state: {
        count: 10000,
        msg: '你好'
      },
      // 修改state内数据的逻辑.
      mutations: {
        // count+1
        plus(state, num) {
          state.count += num
        },
        // count-1
        reduce(state, num) {
          state.count -= num
        }
      },
      // 异步触发mutations
      actions: {
        asyncPlus(store, num) {
          // 2秒后触发mutations的plus方法修改state。
          setTimeout(() => {
            store.commit("plus", num);
          }, 2000);
        }
      }
    });

    const box = {
      template: `
        <div>
          <h3>box组件---{{num}}---{{str}}</h3>
          <button @click='$store.dispatch("asyncPlus", 1)'>box--count++</button>
          <button @click='$store.commit("reduce", 1)'>box--count--</button>
        </div>
      `,
      computed: {
        // count() {
        //   return this.$store.state.count
        // }
        // msg() {
        //   return this.$store.state.msg
        // }
        // ...mapState(['count', 'msg'])
        ...mapState({
          num: 'count',
          str: 'msg'
        })
      },
    }

    const son = {
      template: `
        <div>
          <h3>son组件---{{count}}</h3>
          <button @click='$store.dispatch("asyncPlus", 2)'>son--count++</button>
          <button @click='$store.commit("reduce", 2)'>son--count--</button>
        </div>
      `,
      computed: {
        // count() {
        //   return this.$store.state.count
        // }
        ...mapState(['count'])
      },
    }

    const App = {
      template: `
        <div id='app'>
          <h3>App组件{{count}}</h3>
          <button @click='$store.dispatch("asyncPlus", 3)'>App--count++</button>
          <button @click='$store.commit("reduce", 3)'>App--count--</button>
          <box />
          <son />
        </div>
      `,
      components: { box, son },
      computed: {
        // count() {
        //   return this.$store.state.count
        // }
        ...mapState(['count'])
      },
    }

    let vm = new Vue({
      el: '#app',
      components: {App},
      template: `<App />`,
      // store: store
      store
    });

  </script>

十二、mapMutations等 

<body>
  
  <div id='app'></div>
</body>

 

<script src="js/vue.js"></script>
  <!-- vuex是vue的插件,需要在引入完成Vue后再引入Vuex -->
  <script src="js/vuex.js"></script>
  <script>  

    const store = new Vuex.Store({
      // 严格模式.禁止在mutations之外修改state.
      // 如果在mutations之外修改state,会报这个错[vuex] do not mutate vuex store state outside mutation handlers.
      strict: true,
      // 多个组件共用的状态.(数据)
      state: {
        count: 10000
      },
      // 修改state内数据的逻辑.
      mutations: {
        // count+1
        plus(state, num) {
          state.count += num
        },
        // count-1
        reduce(state, num) {
          state.count -= num
        }
      },
      // 异步触发mutations
      actions: {
        asyncPlus(store, num) {
          // 2秒后触发mutations的plus方法修改state。
          setTimeout(() => {
            store.commit("plus", num);
          }, 2000);
        }
      }
    });

    const box = {
      template: `
        <div>
          <h3>box组件---{{count}}</h3>
          <button @click='$store.dispatch("asyncPlus", 1)'>box--count++</button>
          <button @click='$store.commit("reduce", 1)'>box--count--</button>
        </div>
      `,
      computed: {
        count() {
          return this.$store.state.count
        }
      },
    }

    const son = {
      template: `
        <div>
          <h3>son组件---{{count}}</h3>
          <button @click='$store.dispatch("asyncPlus", 2)'>son--count++</button>
          <button @click='$store.commit("reduce", 2)'>son--count--</button>
        </div>
      `,
      computed: {
        count() {
          return this.$store.state.count
        }
      },
    }

    const App = {
      template: `
        <div id='app'>
          <h3>App组件{{count}}</h3>
          <button @click='$store.dispatch("asyncPlus", 3)'>App--count++</button>
          <button @click='$store.commit("reduce", 3)'>App--count--</button>
          <box />
          <son />
        </div>
      `,
      components: { box, son },
      computed: {
        count() {
          return this.$store.state.count
        }
      },
    }

    let vm = new Vue({
      el: '#app',
      components: {App},
      template: `<App />`,
      // store: store
      store
    });

  </script>

十三、组件混合 

<body>
  
  <div id='app'></div>
</body>

 

<script src="js/vue.js"></script>
  <!-- vuex是vue的插件,需要在引入完成Vue后再引入Vuex -->
  <script src="js/vuex.js"></script>
  <script>

    const { mapState, mapMutations, mapActions }  = Vuex;


    const store = new Vuex.Store({
      strict: true,
      // 多个组件共用的状态.(数据)
      state: {
        count: 10000,
        msg: '你好'
      },
      // 修改state内数据的逻辑.
      mutations: {
        // count+1
        plus(state, num) {
          state.count += num
        },
        // count-1
        reduce(state, num) {
          state.count -= num
        }
      },
      // 异步触发mutations
      actions: {
        asyncPlus(store, num) {
          // 2秒后触发mutations的plus方法修改state。
          setTimeout(() => {
            store.commit("plus", num);
          }, 2000);
        }
      }
    });

    // 组件的公共选项部分
    // 这部分需要通过组件的mixins选项引入.
    // 如果组件本身就包含mx内的选项,则以组件的的选项为准.
    const mx = {
      computed: {
        ...mapState(['count'])
      },
      methods: {
        ...mapActions(['asyncPlus']),
        ...mapMutations(['reduce'])
      }
    }

    const box = {
      template: `
        <div>
          <h3>box组件---{{count}}</h3>
          <button @click='asyncPlus(1)'>box--count++</button>
          <button @click='reduce(1)'>box--count--</button>
        </div>
      `,
      mixins: [mx],
    }

    const son = {
      template: `
        <div>
          <h3>son组件---{{count}}</h3>
          <button @click='asyncPlus(2)'>son--count++</button>
          <button @click='reduce(2)'>son--count--</button>
        </div>
      `,
      mixins: [mx],
    }

    const App = {
      template: `
        <div id='app'>
          <h3>App组件{{count}}</h3>
          <button @click='asyncPlus(3)'>App--count++</button>
          <button @click='reduce(3)'>App--count--</button>
          <box />
          <son />
        </div>
      `,
      components: { box, son },
      mixins: [mx],
    }

    let vm = new Vue({
      el: '#app',
      components: {App},
      template: `<App />`,
      // store: store
      store
    });

  </script>

十四、vuex的计算属性 

<body>
  
  <div id='app'></div>
</body>

 

<script src="js/vue.js"></script>
  <script src="js/vuex.js"></script>
  <script>

    const { mapState, mapMutations, mapGetters } = Vuex;

    const store = new Vuex.Store({
      state: {
        count: 1,
        price: 10,
      },
      // Vuex的计算属性total
      getters: {
        total({count, price}) {
          return count * price
        }
      },
      mutations: {
        setCount(state, val) {
          state.count = val
        },
        setPrice(state, val) {
          state.price = val
        }
      }
    });

    const mx = {
      computed: {
        ...mapState(['count', 'price'])
      },
      methods: {
        ...mapMutations(['setCount', 'setPrice'])
      }
    }

    const count = {
      template: `<input type='text' placeholder='数量' :value='count' @input='setCount($event.target.value)' />`,
      mixins: [mx]
    }

    const price = {
      template: `<input type='text' placeholder='单价' :value='price' @input='setPrice($event.target.value)' />`,
      mixins: [mx]
    }

    const total = {
      template: `<div>总价:{{total}}</div>`,
      computed: {
        // total() {
        //   通过$store来获取Vuex的计算属性.
        //   return this.$store.getters.total
        // }
        
        // 通过映射方法快速引入Vuex的计算属性total
        ...mapGetters(['total'])
      }
    }

    const App = {
      template: `
        <div>
          <count />
          <price />
          <total />
        </div>
      `,
      components: {count, price, total},
      store
    }

    new Vue({
      el: '#app',
      components: { App },
      template: `<App />`
    })

  </script>

AVIC_501
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础语法之事件处理
weixin_45608136的博客
08-11 76
开篇～ 1、事件的基本使用 实例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <di.
vue中子组件更新父组件
Mr古技术分享
07-22 1298
一、关于vue中watch的认识 我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候 •1、常见的使用场景 … watch:{ value(val) { console.log(val); this.visible = val; } } … •2、如果要一开始就执行 watch: { firstName: { handler(newName, oldName) { this.fullName = newName + '-' + this.lastName;
vue3 computed 取store值 出现 do not mutate vuex store state outside mutation handlers 错误
会飞的程序猿
08-11 1063
明明没有修改store值却有do not mutate vuex store state outside mutation handlers报错。开发中的各种奇怪问题。
vue报错：Error: [vuex] Do not mutate vuex store state outside mutation handlers.
热门推荐
qq_32614411的博客
08-24 3万+
 报错原理解读  Error: [vuex] Do not mutate vuex store state outside mutation handlers. 该报错从文本意思理解还是很清晰的，不要在mutation函数外修改vuex中存储的值。 通常情况下，vuex挂载到vue上之后，vuex中的值可以在组件中修改 this.$store.state.count = 1 但我们不...
Vue 实现组件的强制刷新
Jay的博客
01-15 1万+
文章目录前言方法一：v-if方法二：this.$forceUpdate()方法三：:key=“value” 前言 在vue 开发中，出于各种目的，我们常常需要让组件重新加载渲染。接下来，我们就讲讲强制组件刷新的方法。 方法一：v-if 对于v-if 的使用，我们常用在子组件显示上。我们查看文档时，会发现它常常被用于与v-show 的比较。对于经常性加载的组件，显示方式应该使用v-show 来实现...
操作vuex中的数据报错 Do not mutate vuex store state outside mutation handlers
weixin_42565367的博客
09-24 3740
上一篇博客有提到直接改变vuex中的值会报错，现在详细记录一下这个错误，首先看一下错误 这是因为直接操作vuex中的数据没有通过mutations去更新state而报的错误，如果在一个组件中初始化数据赋值state中的数据，如下 this.modelList = store.state.sd.frame.modelList 然后在方法中改变了modelList（如增删改），如下方法 changeModel(model) { if (model) { model.model
Error: [vuex] do not mutate vuex store state outside mutation handlers
Kotoba209_的博客
05-29 2468
1. 问题解析 通常出现这种错误是因为 在 mutation 函数外修改了 state 里面的值，如： 我这里的参数data是一个对象， 对象为引用类型， 像这样直接赋值只是把地址赋值到当前变量上， 地址指向的值还是同一个对象。 所以在其他地方修改参数data的时候相当于是在修改state里面的selectedSpec， 然后就会报错了。数组同理。 2. 解决方法 可以通过值拷贝的方式把参数data拷贝一份再赋值给state里面的变量，如果只是简单引用类型的值，可以通过浅拷贝的方式 数组也可以使用as
vue的this.$parent的使用
qq_42264793的博客
09-24 1万+
vue组件this.$parent 在使用vue时,你可能会用到this.$parent来进行组件与组件或者组件与外部实例的数据以及方法调用,这里简单介绍下两种使用环境.(这里你可以理解外部实例为非第三方组件) 一、在实例中 this.$parent 写在组件里面,外部实例调用此组件,则其指向vue实例(这里是调用组件的实例),你可以在组件中调用 data,methods: //例子·???? this.$parent.list;//数据(模拟) this.$parent.request();//方法(
详解vue中$nextTick和$forceUpdate的用法
10-15
主要介绍了详解vue中$nextTick和$forceUpdate的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue使用this.$parent.变量名获取父组件的数据得到undefined
韩大璐
10-14 8684
我们知道在子组件中可以通过 this.$parent.数据 this.$parent.方法 主动获取父组件的数据和调用父组件的方法。 但是在工作中，我们经常会遇到使用 this.$parent.数据 获取父组件的数据 得到undefined的情况，如下： 这种问题往往是由于父组件在调用子组件的时候，在子组件的外层包裹了一层UI组件的某个组件 看下父组件调用子组件的代码： <template> <Modal v-model="applyStatus"
温故而知新 Vue 原来也有this.$forceUpdate();
dicha7140的博客
11-13 192
由于一些嵌套特别深的数据，导致数据更新了。UI没有更新（连深度监听都没有监听到），我捉摸着有没有和react一样的立即更新UI的API呢this.forceUpdate()呢？结果还真有： this.$forceUpdate(); 转载于:https://www.cnblogs.com/CyLee/p/9955295.html...
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面不渲染问题
jokren的博客
01-17 2442
重点:this.$forceUpdate(); html &lt;div class="invoice-list" v-for="(item,index) in data" :key="index"&gt; &lt;img src="../../../../../static/images/arrow_bottom.png" v-if="item.imgIf" @cl
vue项目中使用this.$forceUpdate()进行强制刷新
Grady_H的博客
03-23 2627
问题： 解决页面v-for中，如果层次太多，有时候数据发生改变但是页面上看到的效果是毫无变化。 解决： 运用 this.$forceUpdate()强制刷新 案例： 页面部分： <el-form :model="form" label-width="100px" style="width: 800px" class="demo-ruleForm" > <el-form-item
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
ducaijia_123的博客
07-10 5105
this.$forceUpdate(),可以解决数据已经获取，页面还没有渲染的问题
vue报错：do not mutate vuex store state outside mutation handlers.
土匪丁的博客
01-27 549
项目中使用vuex遇到如下图问题，提示内容不要在mutation函数外修改vuex中存储的值，但是程序运行正常 正常情况下vuex的值是可以在vue页面组件页面中修改的，但是为了避免不必要的参数混乱，不推荐此写法。 然而vuex也是暖暖的提供了严格模式 修改为false之后控制台不再提示警告 ...
超级实用的vue小技巧，用了之后直呼好棒~
欧阳的技术博客
07-15 1万+
实用的vue小技巧，来源于真实企业实战1. 原型注入2. 对象冻结3.img 加载失败4. 递归组件 1. 原型注入 全局属性和方法可以这么定义 方便调用和获取 一般不定义很多（会污染原型，每次实例Vue都会带上） // main.js入口文件内 import Vue from "vue"; import router from "./router"; import store from "./store"; import dayjs from "dayjs"; import App from "./
2018年九个很受欢迎的vue前端UI框架
祈澈菇凉
08-28 1万+
最近在逛各大网站，论坛，SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，小编自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在做自己的公司项目。 学习的过程之中发现继最热的 React 组件库和 Angular 组件库之后，这里有很多个流行和实用的 Vue.js 组件库完善你的下一个用 V...
[qiankun]主应用和子应用间通信报错：[vuex] do not mutate vuex store state outside mutation handlers.
weixin_44263646的博客
06-02 986
报错情况： 主要原因是主应用中定义的全局状态下发给子应用，子应用注册成vuex全局状态后，并修改了值更新给主应用，主应用也同步更新自己的全局状态，此时的全局状态是vuex注册过的，在主应用更改就会报错了。 主应用定义了全局数据（主要是登录的用户数据），用于下发给子应用： store.js import {initGlobalState} from 'qiankun' import {reactive} from 'vue' import registerGlobalModule from "./global
vue3项目中优雅的在vuex中异步获取字典类型数据
ghost1227800的博客
08-19 2413
需求：在大型项目中字典管理尤为重要，字典数据往往在多个页面都能用到。当然，也可能有用不到的时候，所以前端菜鸟的我，敏锐的发现了我现阶段获取字典数据的问题，也百度了几篇文章，发现并不符合我的需求，看了一下其他作者的思路，最终以这种方式实现。话不多说上代码： 以前： 页面A：使用字典A =》请求字典A //挂载之前 proxy.$http({ url: `/api/options`, }) .then((data: any) => { state.option = data.data; .
java vue框架
最新发布
09-05
Java Vue框架是指使用Java语言和Vue.js框架来开发Web应用程序的一种技术架构。Java是一种跨平台的编程语言，具有强大的面向对象特性和丰富的生态系统，被广泛应用于企业级应用程序开发。而Vue.js是一种轻量级的JavaScript框架，用于构建用户界面，具有简洁的语法和灵活的组件化开发模式。 Java Vue框架的优势在于它能够充分发挥Java的后端能力和Vue.js的前端特性。Java作为后端语言，可以处理各种复杂的业务逻辑和数据处理，同时提供了可靠的安全性和性能。而Vue.js作为前端框架，能够提供丰富的用户界面和良好的用户体验，支持响应式设计和组件化开发。 使用Java Vue框架可以迅速构建现代化的Web应用程序。Java提供了强大的后端支持，包括数据库访问、事务处理、安全认证等功能。Vue.js提供了灵活的前端组件化开发模式，可以构建出复杂的用户界面，并实现前后端数据的无缝交互。这使得开发人员可以按照自己的需求，选择合适的组件和技术，快速构建出高质量的Web应用程序。 此外，Java Vue框架也具有良好的可维护性和扩展性。Java的面向对象特性使得代码可以更加模块化和可复用，便于团队协作和项目管理。Vue.js的组件化开发模式使得前端代码可以更好地组织和维护，而且可以根据需求进行灵活的扩展和定制。 综上所述，Java Vue框架结合了Java的后端能力和Vue.js的前端特性，可以快速构建现代化的Web应用程序，具有良好的可维护性和扩展性。这使得Java Vue框架成为开发人员的首选技术之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值