vuex的使用

Vue中的vuex和React中的redux 都被称为状态管理机制。

理解：在state中定义了一个数据之后，可以在所在项目中的任何一个组件里进行获取、进行修改，并且此次修改可以得到全局的响应变更。

1、安装vuex

$ npm install vuex --save

2、在src下新建文件夹store，store文件夹下新建js文件index.js，如下

3、在新建的index.js文件中，导入如下配置

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

//创建仓库对象
let store = new Vuex.Store({
  state:{},
  getters:{},
  mutations:{},
  actions:{}
});

export default store;

4、在main.js中引入store，如下

5、在App.vue文件中使用这四个辅助函数的时候，需要先在script标签内引入，如下

6、在App.vue文件中的computed使用...Vuex.mapState();  ...Vuex.mapGetters();   

                                     methods使用...Vuex.mapMutations();   ...Vuex.mapActions();

7.在App.vue使用{{}}拿到仓库中的数据

---

---

仓库对象的意思为下：

state里面存放的是状态（或者说是数据）

getters里存放的是对state的数据的过滤

mutations（突变）突变state中的数据（同步操作），一般就是通过mutations去改变state中的值，不会直接操作state中的数据

actions放置异步请求，调用mutations中的方法，进而改变state中的值

例子如下：

在使用vuex时，想要对state中的数据进行更改时，步骤如下：

在actions中进行异步操作（比如使用axios调用后台接口），再调用mutations突变中的方法，去更改state中的数据，并且getters中的值也会同步改变