vuex : 状态管理器,能够管理你的数据状态
作用:将数据交给state集中管理、分发。
应用:用于复杂的页面,一个数据被多个页面或者路由共享(互相交互),或者多层级数据交互时可以使用vuex
参考地址:https://vuex.vuejs.org/zh/
先安装vue环境:vue create app
使用vuex步骤:
1.安装:npm i vuex
2.引包:
引 vue 和 vuex 比如:
import Vue from 'vue';
import Vuex from 'vuex';
3.引用:
Vue.use(Vuex)
4.new Vuex.Store({...})
new Vuex.Store({
//你想要哪些数据被所有组件直接拿到就把这些数据放到state下
state:{
//初始化状态
count:10,
注意:改变state中的引用类型的数据必须要让数据直接发生变化(地址发生变化)
比如:
arr:[{id:xx,num:123}]
{id:xx,num:124}
state.arr = [...state.arr]
},
mutations:{
//改变数据的方法
add(state){ //这里的state就是初始化状态
//此处为改变state.xxx数据的代码...
}
//调用:this.$store.commit(mutations中的函数名,可以跟参数)
//注意:在mutations下的操作都是同步的。
}
})
5:new Vue({
store
})
State:驱动应用的数据源
在输出state的时候,可以使用辅助函数来简化你的操作(不用也行)。
1.import {mapState} from 'vuex'
2.(1) computed:mapState(['count'])
2.(2) 建议第二步使用这种:
computed:{
...mapState(['count'])
}
getters (等同于computed):当数据发生变化的时候派生出另一个“事务”
view (视图)层应用:
this.$store.getters.xxx
辅助函数:
mapGetters(['xxx'])
使用组件 - 第三方组件
actions(只要是这个数据的状态需要被很多组件使用,并且此数据还是一个从后台请求的数据(异步数据)就要使用actions)
actions:{
actionsName($store,可以跟参数){
//异步环境之后使用
$store.commit('add',参数)
}
}
view层使用:
this.$store.dispatch('actionsName',传参)
*/
/*
vue常用的UI组件:
https://www.cnblogs.com/theblogs/p/9964753.html