本文深入解析了Vue.js的Vuex插件，详细介绍了其作为单一状态树的作用和实现方式，包括状态管理、mutations、actions、getters的使用，以及如何在组件中调用这些功能。
vuex-store解析
5.0------vuex共享 是插件 Single Source of Truth单一状态树–》单一数据源 即只推荐使用一个store
- store文件下 index.js
import Vue from 'vue'
import Vuex from 'vuex'
1.1.安装插件
vue.use(Vuex)
1.2.创建对象
const store = new Vuex.Store({
state:{ Action ->Mutations(先进行修改) ->State(不要在这进行修改)
counter:1000 Devtools插件 监控state的改变（只能监控同步操作，直接修改state是监控不了）
student:[
{name:'1',age:18},
{name:'3',age:22},
{name:'2',age:30}
],
info:{
name:'cobe',
age:33,
hobby:hehe
}
},-----------------------------------------------
mutations:{
同步操作
// 定义方法 只要对state进行修改的内容 都在这里进行状态更新
increment(state){ 在App.vue中用 this.$store.commit('increment') 获取
state.counter++
},
decrement(state){ 在App.vue中用 this.$store.commit('decrement') 获取
state.counter--
}，
incrementCount(state,count){ 在App.vue中 <button @click="addCount(5)">+5</button>
state.counter += count addCount(count){ 1.普通的提交封装
} this.$store.commit(' incrementCount',count)
, }
incrementCount2(state,payload){ 在App.vue中 <button @click="addCount(5)">+5</button>
state.counter += payload.count addCount(count){ 1.特殊的提交封装
} this.$store.commit({
type:'incrementCount2', count
})
, }
updataInfo(state){
state.info.name = 'coderwh' 响应式
// state.info['address'] = '洛杉矶' 增加一个属性 没有响应式
// Vue.set(state.info,'address','洛杉矶') 增加一个属性 具有响应式
// delete state.info.age 删除一个属性 没有响应式
// Vue.delete(state.info,'age') 删除一个属性 具有响应式
},
addStudent(state,stu){ 在App.vue中 <button @click="addstudent">添加学生</button>
state.student.push(stu) addstudent(){ const stu ={name:'4'.age:20}
} this.$store.commit('addStudent',stu)
}, },-----------------------------------------------
actions:{ 异步操作 类似于mutations 修改state内容时，要经过mutations 在App.vue中 this.$store.dispatch('aupdataInfo',参数)
aUpdateInfo(context，payload(参数)){ context：上下文 相当于store
setTimeout(()=>{
context.commit('updataInfo')
},1000)
},
异步请求后 ，通知外界
2.1 aupdateInfo(context，payload){ context：上下文 相当于store
setTimeout(()=>{ 在App.vue中 this.$store.dispatch('aupdataInfo',{
context.commit('updataInfo') 里面提交完成 message:'携带的信息'
console.log(payload.message) success:()=>{ console.log('里面已完成')
payload.success() 回调 }
},1000) })
},
2.2 aupdateInfo(context，payload){ context：上下文 相当于store
return new Promise((reslove,reject)={ 在App.vue中 this.$store.dispatch('aupdataInfo',‘携带的信息')
setTimeout(()=>{ .then(res=>{
context.commit('updataInfo') 里面提交完成 console.log('里面完成了提交')
console.log(payload) console.log(res) 打印 hahah
reslove('hahah') 向外界传入参数 })
},1000)
})
},
},,-----------------------------------------------
getters:{
类似于计算属性 进行操作但不对state进行修改 eg:filter 过滤器
powerCounter(state){ 在App.vue中 <h2>{{$store.getters.powerCounter}}<h2>
return state.counter * state.counter
},
more20stu2(state){ 在App.vue中 <h2>{{$store.getters.more20stu2}}<h2>
return state.students.filter(s=>s.age >20)
},
more20stu2Length(state,getters){ 在App.vue中 <h2>{{$store.getters.more20stu2Length}}<h2>
return getters.more20stu2.length
},
moreAgeStu(state){ 在App.vue中 <h2>{{$store.getters.moreAgeStu(18)}}<h2> 传入一个参数
return function(age){
return state.student.filter(s=>s.age>age)
}
}
},-----------------------------------------------
module:{ const moduleA={ 在App.vue中 <h2>{{$store.state.a.name}}<h2>
划分专门模块 进行保存 state:{ name:'zhangsan'},
a:moduleA mutations:{ 在App.vue中 <button @click="updateName">修改名字</button>
} updateName(state,payLoad){ updateName(){ this.$store.commit(' updateName','lisi') }
state.name = payLoad
}
},
actions:{
aUpdateName(context){ 这里的 context是本模块
} 如果想调用根模块就调用 context.rootGetters
},
getters:{
fullname(state){ 在App.vue中 <h2>{{$store.getters.fullname}}<h2>
return state.name + 'hahhah'
},
fullname2(state,getters){ 在App.vue中 <h2>{{$store.getters.fullname2}}<h2>
return getters.fullname + 'hahhah2'
},
引用大模块中state的数据-----
fullname3(state,getters,rootstate){ 在App.vue中 <h2>{{$store.getters.fullname3}}<h2>
return getters.fullname + rootstate.counter
}
}
})
default export store -----------------------------------------------
2.在main.js中 添加
import store from './store'
new Vue({
el:'#app',
store, 添加这行
render:h =>h(App)
})
3.在App.vue 中 -----------------------------------------------
3.1
<h2>{{$store.state.counter}}<h2>
<button @click="$store.state.counter++">+</button>
<button @click="$store.state.counter++">-</button>
</template>
3.2 <template>
<h2>{{$store.state.counter++}}<h2>
<button @click="additon">+</button>
<button @click="subtraction">-</button>
<h2>{{$store.getters.powerCounter}}<h2>
<h2>{{more20stu}}<h2>
</template>
<script>
export default{
computed:{
more20stu(){
return this.$store.state.students.filter(s=>{
return s.age >= 20
})
}
},
methods:{
additon(){
this.$store.commit('increment')
},
subtraction(){
this.$store.commit('decrement')
},
}
}
</script>
5.x-----------es6语法 对象结构
const obj = {
name:'why',
age:18,
height:1.9
}
const {name,height,age} =obj; 顺序可以调换
console.log(obj.name) =>why console.log(obj.age) =>18 console.log(obj.height) =>1.9
例子：局部状态通过context.state 暴露出来，根节点状态则为context.rootState 在上述module中有描述
const moduleA = {
actions:{
hahaha({state,commit,rootState})
console.log(rootState) 打印出来的是根节点对应的内容
}，
getters:{
hahaha({state,commit,rootState})
return state.count + rootState.count 即本状态下的count 加上 根节点上 count
console.log(rootState) 打印出来的是根节点对应的内容
}
}
扫一扫
2701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
