vue中的vuex(状态管理)

vuex的属性及其使用方法及其规范

当项目过大页面可能就嵌套较深此时我们进行两个页面之间的传值可能就比较麻烦这时就可以使用vuex来实现数据的管理、还有当系统设置了单点登录时那么token我们可能每个页面都要用到这种情况我们也可以使用vuex来进行管理。
注意：vue3和vue2分别对应不同的vuex版本不能混着使用

vuex有五个属性

1. state
2. getters
3. mutations
4. actions
5. modules

搭建vuex环境
1、创建文件 src/store/index.js

//引入Vue核心库
important Vue from 'vue'
//引入vuex
important Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//上面有个重要的一点为何要在该文件下使用插件，一般使用插件我们可以在main.js使用的，但是因为main.js中的important会优先所有其它代码执行，所以如果在main.js中执行会有一个执行错误的报错。
//创建并暴露store
export default new Vuex.Store({
	actons:{},
	mutations:{},
	state:{}
})

2、在main.js中创建vm时传入store配置项

.......
//引入store
important store from './store'
......
//创建vm 
new Vue({
	el:'#app',
	render:h => h(App),
	store
})

state

state的声明

// 在stort中如何定义state中的数据
import { createStore } from 'vuex'
export default createStore({
  state: {
    count:1
  },//这里就是存储state有点类似于vue中的data
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

state的使用

第一种

第二种使用computed

mutations

state中数据我们只能通过mutations去修改的

actions

1、actions和mutations差不多，但是一般我们是通过在actions进行异步请求然后获取数据对mutations里面的方法进行操作，然后mutations再通过操作state来进行数据的改变
2、所以异步请求都会放在actions里面，如果没有异步请求可以直接操作mutations操作state里面的值

注意actions和mutations里面需要传参的话，需要在模版中绑定好传递的参数，否则默认传递为事件对象，当以数组形式生成时，要保证模版中的事件和mutations(actions)中的事件名一致

getters

跟vue中的计算属性非常相似

modules

当我们项目足够大，每个模块可能都会用到存储在状态机里的数据，此时我们需要按模块来划分，以免看着混乱，不然大家都把数据定义在一个js里面

下面是按照b站上某个学习视频截的图，这里做个记录。

开启命名空间之后我们使用…mapState等简写的时候，vue才能识别模块名，这个属性默认值是false的。