1.Vuex理解
Vuex是vue.js应用设计的状态管理架构,通俗理解,可以想象就是vue组件中的data
1.state=>基本数据源
- 对应一般vue对象中的data
- state里存放数据为响应式,Vue组件从store里面读取,如果store钟数据发生改变,依赖这个数据的组件也会生更新
// 简单的state
const store = new Vuex.Store({
state: {
count:0
},
})
2.mutatios=>提交更改数据的方法(同步)
- 提交mutation是更改Vuex钟的store钟的状态唯一办法
- mutation必须是同步的,如果需要用到异步,必须要试用action
- 每个mutation都有一个字符串和一个回调函数,这个回调函数就是十几进行状态更改的地方,会接收sate作为第一个参数,提交载荷作为第二个参数,载荷在一般情况下是一个对象 ,载荷也是可以省略
mutatios存值和取值
// 存储
// 第一个参数是vuex中对应mutation的方法,第二个值就是存入vux中的值
this.$store.commit('setTargetUser',friend);
// 取值
this.$store.state.setTargetUser
mutation小案例
// 仓库内容
state: {
userInfo: {
name: "",
photo: "",
token: ""
},
},
//修改数据的方法
mutations: {
// stete是第一个参数,载荷作为第二个擦胡今昔更改
changeUserInfo(state, user) {
state.userInfo.name = user.name
state.userInfo.photo = user.photo
if (user.token) {
state.userInfo.token = user.token
}
}
}
// 在vue文件中
// 存到vux里,对vuex数据进行修改
this.$store.commit('changeUserInfo',res.data.data)
3.actions=>类似一个容器,包裹mutations,让木塔同时可以异步
- actions类似于mutation
- action提交的是mutation,不是直接变更状态
actions的存值和取值
//存储
this.$store.dispatch('setTargetUser',friend);
//取值
this.$store.getters.targetUser;
// 仓库中
// Action 类似于 mutation,不同在于:
// Action 提交的是 mutation,而不是直接变更状态。
// Action 可以包含任意异步操作。
mutations: {
addNum(state,amount) {
state.num +=amount
},
someMutation(state) {
setTimeout(()=>{
state.count--
},1000)
}
},
actions: {
increment (context,args) {
context.commit('addNum',args)
}
},
//另一种写法
actions: {
increment ({commit},args) {
commit('addNum',args)
}
}
// vue页面中
methods:{
add(){
this.$store.dispatch('increment',this.pa.amount)
}
},
4.getters=>基本数据派生的数据
- getters可以对state进行计算操作,是store的计算属性
- getters可以在多组件之间重复使用
- 如果一个状态只在一个组件内使用,不可以用getters
从store的state中派生出的状态。
getters接收state作为其第一个参数,接受其他 getters 作为第二个参数,如不需要,第二个参数可以省略如下例子:
const store = new Vuex.Store({
state: {
count:0
},
getters: {
// 单个参数
countDouble: function(state){
return state.count * 2
},
// 两个参数
countDoubleAndDouble: function(state, getters) {
return getters.countDouble * 2
}
}
})
--------------------------------------------------------------------------------
和state一样,可以通过Vue的Computed获得Vuex的getters。
const app = new Vue({
//..
store,
computed: {
count: function(){
return this.$store.state.count
},
countDouble: function(){
return this.$store.getters.countDouble
},
countDoubleAndDouble: function(){
return this.$store.getters.countDoubleAndDouble
}
},
//..
})
--------------------------------------------------------------------------------
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性,与state类似
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters([
'countDouble',
'CountDoubleAndDouble',
//..
])
}
}
--------------------------------------------------------------------------------
如果你想将一个 getter 属性另取一个名字,使用对象形式:
mapGetters({
// 映射 this.double 为 store.getters.countDouble
double: 'countDouble'
})
5.modules=>模块化vuex
- Vuex 允许我们将 store 分割到模块(module)。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割