Vuex的使用以及使用和安装出现报错问题解决

Vuex的使用以及使用和安装出现报错问题解决 2023-05-22 740

vuex是官方提供的一个插件，状态管理库，集中式管理项目中组件公用的数据。使用于大项目、组件和模块过多的时候来管理数据

vuex的安装：

npm install --save vuex

安装时可能会出现的问题：系统报错此处安装环境为vue2出现了版本问题这边修改安装3版本即可

vue2 安装vuex@3.6.2 解决此问题

npm install --save vuex@3.6.2

在src目录下创建store文件夹下新建一个index.js文件配置如下：

import Vue from vue
import Vuex from vuex;
 //需要使用插件一次
  Vue.use(Vuex);
 //store:仓库存储数据
    const store={};
 //mutations:修改state的唯一手段
    const mutations={};
 //action:处理action,书写自己的业务逻辑，可以处理异步
    const actions={};
 //getters:理解为计算属性，用于简化仓库数据，让组件获取仓库数组更加方便
     const getters={};
 //对外暴露Store类的一个实例
    export default new Vuex.Store({
        state,mutations,actions,getters
})

随后我们在入口文件main.js中

//引入store
import store from ./store

并且要在实例上注册如下图：

使用小案例：定义一个加减的按钮

代码如下：

//引入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数据的操作了