Vuex的全面简约版总结

目录

1. vuex简介

vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。

2. vuex 的核心概念

vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。

3. 完整的store结构

import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

3.1 view组件中

4. 含有vuex应该遵循的规则

5.参考文献

---

1. vuex简介

vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。

vuex里面的四大金刚：State， Mutations，Actions，Getters

2. vuex 的核心概念

vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。

//创建store
const store = new Vuex.Store({...});

3. 完整的store结构

import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

const moduleA = {
    state: {...},
    getters: {...},
    mutations: {....},
    actions: {...}
}

const store = new Vuex.Store({
//类似于vue中的data存放状态 (mapState)
  state: {
    arr: [0]
  },
//相当于vue中的计算属性 (mapGetters)
  getters: {
    arr: state => state.arr
  },
//类似于vue中的methods
//同步操作: 提交用commit函数 (mapMutations)
  mutations: {
    //第一个参数是state，第二个参数是载荷（payLoad），也就是额外的参数
    setMutationsArr(state, arg) {
      state.arr = arg;
    }
  },
//异步操作: 提交用dispatch函数 (mapActions)
//首先要想得到数据，那就相当于给state赋值，那首先想到的就是mutations来操作state，但是请求的接口都是axios异步，所以就不能用mutations而是用actions，通过actions来操作mutations从而操作state
  actions: {
     actionsArr(context, params) {
         context.commit('setMutationsArr', params + ': context');
      },
      actionsArr1({ commit }, params) {
         commit('setMutationsArr', params);
      },
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
  //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

store.state.a // 获取moduleA的状态

3.1 view组件中

export default {
  data() {
    return {
      //vuex
      state: this.$store.state,
    };
  },
  computed: {
//1. vuex init
    //...mapState(["arr", "userName"]),
//2. vuex get
    //mapGetter 仅仅是将 store 中的 getter 映射到局部计算属性
    //方式1 template =》 {{arr、userName}}
    ...mapGetters(["arr", "userName"]),
    //方式2 template =》 {{vuexGet}}
    vuexGet() {
      return this.$store.state.arr;
    },
  },
  methods: {
//3. vuex set
  //mutations: commit
    //方式1：参数在调用方法时写入 template =》 setMutationsArr(['...mapMutations Arr'])
    ...mapMutations(["setMutationsArr"]),
    //方式2：template =》 mutationsArr(['mutationsArr'])
    mutationsArr(params) {
      this.$store.commit("setMutationsArr", params);
    },
  //actions: dispatch
    //方式1：template =》 mapActionsArr(['...mapActions Arr'])
    ...mapActions(["mapActionsArr"]),
    //方式2：template =》 actionsArr(['actionsArr'])
    actionsArr(params) {
      this.$store.dispatch("actionsArr", params);
      //this.$store.dispatch("actionsArr1", params);
    }
  },
};

备注：对于js 想要使用vuex数据的组件,此时$store是无效的,所以通常import store from '@/stroe'引入通过store.state.n来获取 

4. 含有vuex应该遵循的规则

• 1. 应用层级的状态都应该集中在store中

• 2. 提交 mutation 是更改状态state的唯一方式，并且这个过程是同步的。

• 3. 异步的操作应该都放在action里面

5.参考文献

• Vuex的全面用法总结

• vuex：弄懂mapState、mapGetters、mapMutations、mapActions