vuex的理解 （vue2）

---

---

一. 什么是vuex？使用vuex能够解决什么问题？

所谓的vuex就是vue官方给我们提供的一个状态管理工具，可以解决组件之间数据共享的问题，每一个组件都可以访问到vuex的数据

---

二. vuex的五大核心是什么？

1. state 数据存储
2. mutations 状态修改器 (修改state内的数据)
   严格模式下(strict:true)唯一能够修改state的数据的
3. actions 异步 (可以调用一些请求，或者定时器，等异步操作)
4. getters 计算属性
5. modules 模块化 (针对大型项目)

---

三. 在组件里面如何调用五大核心的属性和方法？

1. state   this.$store.state
2. mutations   this.$store.commit("修改器方法名",数据)
3. actions   this.$store.dispatch("异步方法名",数据)
4. getters   this.$store.getters

---

四. vuex的弊端是什么？怎么解决？

vuex 缺点： 就是刷新数据不保存，但可以用插件来解决
插件 ：vuex-persistedstate、vuex-persisted   持久化插件

---

五. vuex的执行机制是什么？

  在项⽬当中如果要改变 state 的状态,我们⼀般是在组件⾥⾯调⽤ this.$store.dispatch ⽅式来触发 actions ⾥⾯的⽅法,在 actions
⾥⾯的⽅法通过 commit 来调⽤ mutations ⾥⾯定义的⽅法来改变 state,同时这也是 vuex 的执⾏机制

---

六. vuex中的modules的应用

把仓库里的数据分模块管理
每个模块里又有四个核心: state mutations getters actions
然后引入仓库 并且在 modules 下注册模块
在定义的 modules 里开启一个命名：namespaced:true

// store/a.js
export default {
    namespaced:true,
    state:{
        arr:[]
    },
    mutations:{
		add(state,obj){
			state.push(~~ (Math.random()*10))
		}
	},
	actions:{},
	getters:{}
}

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import a from "./a.js"
Vue.use(Vuex)
export default new Vuex.Store({
	state:{},
	mutations:{},
	actions:{},
	getters:{},
  	modules: {
  		a
  	}
})

// 组件中
export default {
  computed: {
    arr() {
      return this.$store.state.a.arr;
      //使用 模块a里的state数据arr
    },
  },
  methods: {
    add() {
      this.$store.commit("a/add");
      //调用a下面的add方法
    },
  },
};