vuex安裝失敗解決的方法實例

Posted on by

1、報錯信息：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
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 [email protected]
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 [email protected] -S

然後查看package.json文件

有vuex版本說明安裝成功

使用小案例：定義一個加減的按鈕

 代碼如下：

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

在actions中上下文解構出{commit}    actions可以處理異步  

//我們在store中index.js文件中配置相應處理
  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
  };

寫到這裡就可以實現按鈕加減count數據的操作瞭   

總結

到此這篇關於vuex安裝失敗解決的文章就介紹到這瞭,更多相關vuex安裝失敗解決內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：