vuex安裝失敗解決的方法實(shí)例

更新時(shí)間：2022年07月18日 12:47:44 作者：Mae_strive

Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex安裝失敗解決的方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

1、報(bào)錯(cuò)信息：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vue-base-rooter@0.1.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR! vue@"^2.6.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.2" from vuex@4.0.2
npm ERR! node_modules/vuex
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Mae\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Mae\AppData\Local\npm-cache_logs\2022-02-13T13_20_52_363Z-debug.log

2、解決方案

npm install vuex@3.6.2 -S

然后查看package.json文件

有vuex版本說明安裝成功

使用小案例：定義一個(gè)加減的按鈕

代碼如下：

//引入mapstate讀取數(shù)據(jù)
    import {mapState} from 'vuex'
//通過computed計(jì)算屬性 解構(gòu)得出數(shù)據(jù)
   computed:{
     ...mapState(['count'])
      },
   methods:{
       add(){
        this.$store.dispatch('add')
       },
    reduce(){
        this.$store.dispatch('reduce')
       }
    }

在actions中上下文解構(gòu)出{commit} actions可以處理異步

//我們?cè)趕tore中index.js文件中配置相應(yīng)處理
  const actions={
    //此處不能直接修改mapstate
      add({commit}){
        commit("ADD");
    },
      reduce({commit}){
        commit("REDUCE");
    },
  };
 
  const mutations={
      ADD(state){
        state.count++;
    },
      REDUCE(state){
        state.count--;
      }
  };
  const state={
     count:1
  };

寫到這里就可以實(shí)現(xiàn)按鈕加減count數(shù)據(jù)的操作了

總結(jié)

到此這篇關(guān)于vuex安裝失敗解決的文章就介紹到這了,更多相關(guān)vuex安裝失敗解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

解決VUE3 keep-alive頁(yè)面切換報(bào)錯(cuò)parentComponent.ctx.deactivate
這篇文章主要介紹了解決VUE3 keep-alive頁(yè)面切換報(bào)錯(cuò)parentComponent.ctx.deactivate is not a function的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue如何實(shí)現(xiàn)從response讀取流下載
這篇文章主要介紹了Vue如何實(shí)現(xiàn)從response讀取流下載問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-04-04
element-ui 關(guān)于獲取select 的label值方法
今天小編就為大家分享一篇element-ui 關(guān)于獲取select 的label值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue刷新頁(yè)面時(shí)去閃爍提升用戶體驗(yàn)效果的實(shí)現(xiàn)方法
這篇文章主要介紹了vue刷新頁(yè)面時(shí)去閃爍提升體驗(yàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-12-12
vue3+typescript實(shí)現(xiàn)圖片懶加載插件
這篇文章主要介紹了vue3+typescript實(shí)現(xiàn)圖片懶加載插件，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-10-10
VUE+SpringBoot實(shí)現(xiàn)分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了VUE+SpringBoot實(shí)現(xiàn)分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue中view-model雙向綁定基礎(chǔ)原理解析
這篇文章主要介紹了vue中view-model雙向綁定基礎(chǔ)原理，文中給大家介紹了vue雙向綁定的原理總結(jié)，本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
Element中el-tabs左右滑動(dòng)動(dòng)畫的實(shí)現(xiàn)
本篇博客將詳細(xì)介紹如何在使用 Vue 以及 Element UI 時(shí),實(shí)現(xiàn)一個(gè)具有左右滑動(dòng)效果的 tab 切換動(dòng)畫,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-03-03
Vue獲取input值的四種常用方法
Vue是一種流行的Web開發(fā)框架,它提供了一個(gè)雙向綁定的語(yǔ)法糖。在Vue中,我們可以很容易地獲取頁(yè)面上的數(shù)據(jù),并且可以實(shí)時(shí)的響應(yīng)其變化,這篇文章主要給大家介紹了關(guān)于Vue獲取input值的四種常用方法,需要的朋友可以參考下
2023-09-09
webpack如何打包一個(gè)按需引入的vue組件庫(kù)
在vue項(xiàng)目開發(fā)中,我們會(huì)將經(jīng)常用到的邏輯或模塊抽象成組件,對(duì)于那些多個(gè)項(xiàng)目都有用到的組件,可以考慮封裝成組件庫(kù),這篇文章主要給大家介紹了關(guān)于webpack如何打包一個(gè)按需引入的vue組件庫(kù)的相關(guān)資料,需要的朋友可以參考下
2022-02-02