Vuex概述
store核心理念基本概念
1.- State： 包涵了store中储存的各状况。
2.- Getters： 近似于 Vue 中的排序特性，依照其它 getter 或 state 排序codice。
3.- Mutation： 几组形式，是发生改变store中状况的主导者，根本无法是并行操作形式。
4.- Action： 几组形式，当中能包涵触发器操作形式。
5.- Moudule： Module是store拆分的模块，每个模块保有他们的state、getters、mutations、actions。
vuex远距表达式
操作形式Mutation和acitonhas表达式mapMutations、mapActions。
前三个用在computed（排序特性中）
后三个用在methods(形式中)
怎样采用
数个模块共享资源同一状况（统计数据）
1.加装vuex增建store配置文件===>index.js
2.采用vuex中的count（state中表述的共享资源状况）3.无法间接修正store中的状况，间接修正devtools窃听不出统计数据的修改
4.mutations 负责管理并行修正状况Vuex的store修正状况惟一的形式：递交mutations–>(this.$store.commit(add))
Getters Store中的排序特性
// 排序数字的平方
quadratic(state) {
// 第一个参数，状况state
return state.count * state.count
}
2.筛选统计数据
filterInfo(state) {
return state.info.filter(res =>{
return res.age>18
})
}
info:this.$store.getters.filterInfo
{{store.getters.filterInfo.length}}4.如果不想年龄晒选写死，想他们输入年龄,只需要在getters里写一个形式// 筛选统计数据
filterInfo(state, age) {
//要返回一个形式才能传值
//age返回的不是一个确定的值，而是一个表达式
// 1.
// return function(age){
// return state.info.filter(res =>{
// return res.age>age
// })
// }
// 2.
return (age) => {//return后才能传递参数
return state.info.filter(res => res.age > age)
}
5.getters中的三个参数// 第一个state,拿统计数据，第二个参数geters:也就是说能从getters中调用上面平方根的形式
testGettes(state,getters){
return getters.quadratic
}
vuex远距表达式
远距表达式
mapState, 用于将state中的统计数据映射到组件的排序特性中<!– 第一种 –>
<!–
模块中的排序特性名称，和vuex状况名称不一致的时候，能采用对象写法
–>
computed:mapState({
cnum:”count”,
})
<!– 第二种 –>
<!–
字符串数组写法，
模块中排序特性名，和vuex中状况名一致的时候
–>
computed:mapState([
“count”,
])
<!– 第三种 –>
<!–
当模块有他们的排序特性的时候，我们能采用结构写法，将远距表达式合并到排序特性中
–>
computed:{
…mapState({
cnum:”count”,
})
}
mapGetters 用于将getter中的排序特性映射到模块的排序特性中用法同mapStatecomputed:{
// 对象展开符，解构mapGetters
…mapGetters({
// 将store中的getters的filterInfo，映射到模块上的info排序特性上
info:”filterInfo”
}),
…mapGetters([ //字符串数组
“getInfoLength”
])
}
mapMutations : 用于将mutations映射到methods中
…mapMutations([
“add”
]),
// 对象写法
…mapMutations({
// 并行，通过commit触发mutations
myadd:”add”,
// 形式名：mutation表达式名
addtwo:”addParms”
}),
mapActions ：于将actions映射到methods中
…mapActions({
// 形式名：mutation表达式名
myasync:”asyncAdd”
})
Vuex中的核心理念 — modules
当项目比较大的时候，如果只有一个模块来维护统计数据，那么这个模块会非常的大，对于维护性来说，不是特别高，所以vuex中，提供模块功能，我们能通过modules将vuex处理为数个模块
const myCount={
state:{
user:{
name:admin,
pass:12345
},
count:10
},
getters:{
},
mutations:{
// 模块的并行中是没有第三参数，(根状况)
cAdd(state,paylaod){
console.log(this)
state.count++
}
},
actions:{
}
}
export default new Vuex.Store({
state:{
num:2
},
modules: { // 模块选项
// 引用myuser模块
u:myUser,
c:myCount,
cat
}
})
采用模块的特性$store.state.模块名称.特性名
$store.getters.模块名称.特性名
$store.commit(形式名称)//并行递交
$store.dispatch(形式名称) //触发器递交
两栖作战解析
上面基本概念说完了，该两栖作战练习了，动起来！
State,Mutations
store下的index.js
import Vue from vue
import Vuex from vuex
// 加装插件
Vue.use(Vuex)
export default new Vuex.Store({
state: {//储存状况
// 自表述共享资源状况
count:0,
stu:[
{id:1001,name:123},
{id:1003,name:符鼠},
{id:1004,name:追梦},
],
user:{
name:随便,
sex:随机
}
},
// vuex中的store状况更新的惟一形式是递交Mutation
mutations: {//写形式，通过mutations修正、页面的插件才能窃听到
add(state){//形式的第一个参数就是state，也就是state的对象
// this是store对象
state.count++
},
//state(store中的state),(Payload:递交方法携带的参数)
addTen(state,ten){//点击加10
state.count += ten
},
addTwo(state,obj){//点击加2，加obj才能接收对象
state.count += obj.two
},
// 向stu数组中添加一条统计数据
addStu(state,payload){
state.stu.push(payload)//向数组中添加统计数据
},
updUser(state,age){//给stu对象添加新特性
// state.user.age=18无法写等号
// state.user = {…state.user,age:12}
Vue.set(state.user,age,123)
}
},
actions: {},
modules: {}
})
Aone模块
<template>
<div class=”hello”>
<h1>aone模块</h1>
<h2>{{$store.state.count}}</h2>
<li>{{$store.state.stu}}</li>
<button @click=”addTen”>+10</button>
<button @click=”addStu”>添加成员</button>
</div>
</template>
<script>
export default {
name: aone,
props: {
msg: String,
count:Number
},
data() {
return {
stu:{id:1005,name:测试}
}
},
methods: {
addTen(){
// 触发mutations表达式，指定额外参数,字符串形式递交
this.$store.commit(addTen,10)
},
addStu(){
this.$store.commit(addStu,this.stu)
}
},
}
</script>
hello模块
<template>
<div class=”hello”>
<h1>helloworld模块</h1>
<h2>{{$store.state.count}}</h2>
<h2>{{$store.state.user}}</h2>
<button @click=”addTwo”>点击加2</button>
<button @click=”updUser”>修正</button>
</div>
</template>
<script>
export default {
name: HelloWorld,
props: {
msg: String,
count:Number
},
methods: {
addTwo(){
// 触发mutations表达式，指定额外参数,对象形式递交
this.$store.commit({
type:addTwo,
two:2
})
},
updUser(){
// 触发mutations表达式，指定额外参数
this.$store.commit({
type:updUser })
}
},
}
</script>
Actions,Getters
store下的index.js
import Vue from vue
import Vuex from vuex
// 加装插件
Vue.use(Vuex)
// 实例化vuex并导出
export default new Vuex.Store({
state: {
count: 0,
info: [
{
di: 1, name: 开发者1, age: 21
},
{
di: 2, name: 开发者2, age: 22
},
{
di: 3, name: 开发者3, age: 23
},
]
},
// 根本无法通过mutations更改统计数据
mutations: {//如果mutation是一个触发器表达式，那么devtools无法跟踪统计数据变化
// mutations负责管理并行修正状况
increment(state, payload) {
// setTimeout(()=>{
state.count += payload
// },2000)
}
},
// 专写触发器actions
actions: {//context上下文对象
asyncIcrement(context, payload) {
setTimeout(() => {
context.commit(increment, payload)
}, 2000)
}
},
getters: {//store的排序特性
// 排序数字的平方
quadratic(state) {
// 第一个参数，状况state
return state.count * state.count
},
// 筛选统计数据
filterInfo(state, age) {
//要返回一个形式才能传值
//age返回的不是一个确定的值，而是一个函数
// return function(age){
// return state.info.filter(res =>{
// return res.age>age
// })
// }
return (age) => {//return后才能传递参数
return state.info.filter(res => res.age > age)
}
},
testGettes(state,getters){
// 调用上面平方根的形式
return getters.quadratic
}
},
modules: {
}
})
myvux模块
<template>
<div id=”main”>
<h2>这是myvue模块</h2>
<h3>{{$store.state.count}}</h3>
<button @click=”add”>+1</button>
<button @click=”asyAdd”>触发器+1</buttdefault {
methods: {
add(){
this.$store.commit(increment,5)
},
asyAdd(){
// 触发actions触发器并传参
this.$store.dispatch(asyncIcrement,10)
}
},
}
</script>
myhome模块
<template>
<div id=”home”>
<h2>这是home模块</h2>
<h3>{{$store.state.count}}</h3>
<h3>平方：{{$store.getters.quadratic}}</h3>
{{itme}}
</li>
<!– {{$store.getters.filterInfo.length}} –>
//调用上面表达式
<h5>{{$store.getters.testGettes}}</h5>
</div>
</div>
</template>
<script>
export default {
data() {
return {
info:this.$store.getters.filterInfo(22)
}
},
}
</script>
远距表达式及Modules
store下的index.js
import Vue from vue
import Vuex from vuex
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0,
user:{
name:admin,
pass:123
},
info: [
{
di: 1, name: 开发者1, age: 21
},
{
di: 2, name: 开发者2, age: 22
},
]
},
getters:{
filterInfo(state){
// 过滤大于20的统计数据
return state.info.filter(info=>info.age>22)
},
getInfoLeng(state,getter){
return getter.filterInfo.length
}
},
mutations: {
add(state){
this.count ++
},
addParms(state,num){
this.count += num
}
},
actions: {
//触发器
asyncAdd(context){
setTimeout(()=>{
context.commit(add)
},2000)
}
},
modules: {
}
})
Mystate模块（mapstate对应state）
<template>
<div id=”mystate”>
<!– 采用vuex中的count –>
<p>数字：{{ $store.state.count }}</p>
<!– <p>数字data：{{num}}</p> –>
<!– <p>排序特性中的数字：{{cnum}}</p> –>
<!– vuex中的统计数据 –>
<!– <p>mapstate:{{count}}</p>
<p>mapstate:{{user}}</p> –>
<p>cuser:{{ cuser }}</p>
<p>cuser:{{ csuser }}</p>
<p>cnum:{{ cnum }}</p>
<p>模块他们的排序特性：{{ cPrice }}</p>
</div>
</template>
<script>
import {mapState} from vuex
// console.log(mapState);
export default {
data() {
return {
// 在data中表述不是响应式
num:this.$store.state.count,
price:10
}
},
// 排序特性
// computed:{
// cnum(){
// return this.$store.state.count
// }
// }
// 通过mapState远距表达式，帮我们自动生成排序特性
// computed:mapState([//字符串数组写法
// // 特性名和vuex状况名相同能采用数组的形式写
// count,//将vuex中状况count映射到排序特性中
// user
// ])
// 以对象形式采用
// computed:mapState({
// cuser(state){
// // 通过排序特性的第一个表达式，是vuex中的状况state,所以能通过stateuser:state => state.user,
// // 等价于tate => state.count
// cnum:count
// })
computed:{
//模块他们的排序特性
cPrice(){
return $+this.price
},
//通过mapState映射过来的排序特性
…mapState({
cuser(state){
// 通过排序特性的第一个表达式，是vuex中 csuser:state => state.user,
// 等价于tate => state.count
cnum:count
})
}
}
</script>
Mygetter模块(mapgetters对应getters)
<template>
<div id=”mygetter”>
<h3>mapgetter用法</h3>
<p>间接采用getters:{{$store.getters.filterInfo}}</p>
</ console.log(mapState);
export default {
computed: {
// 对象展开符解构mapgetters
…mapGetters({//对象写法
// 将store中的getters的filterInfo映射到模块上的info排序特性上
info:filterInfo
}),
…mapGetters([//字符串数组写法
getInfoLeng
])
},
};
</script>
mymutations模块（mapmutations对应mutations）
<template>
<div id=”mymutations”>
<h3>采用mapmutions和mapactions</h3>
<button @click=”add”>触发add</button>
<button @click=”myadd”>触发myadd</button>
<!– 传参 –>
<button @click=”addtwo(3)”>+3</button>
<button @click=”myasync”>触发触发器</button>
</div>
</template>
<scriptexport default {
// 排序特性
computed:{
},
// 放形式
methods: {
// 为了触发mutation表达式 表述的形式没必要这么写
// clickAdd(){
// this.$store.commit(add)
// }
//触发触发器
myasync(){
this.$store.dispantch(asyncAdd)
},
// 字符串数组的用法
…mapMutations([
add
]),
// 对象写法
…mapMutations({
// 并行形式通过commit触发mutauions
myadd:add,
// 形式名：mutation表达式名
addtwo:addParms
}),
//触发器
…mapActions({
myasync:asyncAdd
})
},
}
</script>
Modules模块的采用
<script>
//vuex文件
import Vue from vue
import Vuex from vuex
import myUser from ./myuser
import cat from ./cat
Vue.use(Vuex)
// const myUser={
// }
export default new Vuex.Store({
modules: {//模块选项
// 引入
u:myUser,
cat
}
})
</script>
———————————————————–下面是展示页面
<template>
<div class=”modules”>
<!– 多了一层u –>
<h4>user信息：{{$store.state.u.user}}</h4>
<h4>cat信息：{{$store.state.cat.mycat}}</h4>
</div>
</template>
结尾
如果对您有帮助，希望能给个 评论收藏三连！
想跟博主交朋友的能关注下 ，有问题评论留言。
博主为人老实，无偿解答问题哦❤
