vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。

直白的来说，vuex就是一个vue中管理数据状态的库，在state中定义了一组数据后，在全局的所有组件中均可进行获取和修改。

vuex的安装

在vue项目中安装vuex

npm install vuex --save

然后我们需要在自己的src目录下面建一个store文件夹，并在下方建index.js这一文件

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

其中，在抛出的Vuex.store中一共有五个属性，他们都有各自的作用，state是用来定义数据状态的，getters相当于是vue中的计算属性，mutations是相当于vue中的methods方法，是用来写同步操作的，而actions则是用来执行异步操作，modules则是模块拆分。

将数据定义到state中

state: {
    list: [
      { id: 1, name: "西瓜" },
      { id: 2, name: "苹果" },
    ],
  },

我们在src下vuews中定义一个vuex.vuex，应用到这一页面

import { mapState } from 'vuex'
computed:{ ...mapState(['list']) }

如果想要使用同步方法，那我们在mutations中定义同步方法后，在vue中进行使用

 mutations: {
    addFruits(state, val) {
      state.list.push(val);
    },
  },

methods: {
    ...mapMutations(["addFruits"]),
    addFruitFn() {
      if (this.inputValue === "") {
        return;
      }
      let data = {
        id: this.list.length + 1,
        name: this.inputValue,
      };
     this.addFruits(data);
     this.inputValue = "";
    },
  },

这是一个进行添加数据的例子。

什么是vuex?vuex的作用

vuex是什么

vuex的安装