vuex的使用

vuex

所谓的vuex就是对于vue中的数据状态做集中管理，通过vuex可以实现多组件之间的数据通讯和数据共享。

属性

state

数据管理，在state中可以定义我们共享的数据

new Vuex.Store({
state:{
name:"测试name"
})

getters

getters是对state中的数据进行计算，常常被解析成组件中的computed 其用发和computed类似

new Vuex.store({
state:{
name:"测试数据"
},
getters:{
getName(state){ ///默认参数是state
return state.name
}
}
})

mutations

mutations属性就是同步的函数用于改变state的值

new Vuex.store({
state:{
name:"测试数据"
},
getters:{
getName(state){ ///默认参数是state
return state.name
},
mutations:{
 changeName(state){//默认值也是state
 state.name="改变后的值"
 }
}
})

actions

异步更新函数，一般这里写的函数都是异步函数

new Vuex.store({
state:{
name:"测试数据"
},
getters:{
getName(state){ ///默认参数是state
return state.name
},
mutations:{
 changeName(state){//默认值也是state,如果有参数接受的话可以定义第二个第三个等参数
 state.name="改变后的值"
 }
},
actions:{
aschangName({commit}){//默认参数是context执行上下文
setTimeout(()=>{
 commit('changeName')
},1000)
}
}
})

modules

modules其实就是将state，getters，mutations，actions 根据业务进行分模块 在使用的时候我们可以按照模块化进行使用，便于管理和实现.

//app.js
export default {
namespaced:true,
state:{
userInfo:{
name:"姓名",
age:12
}
},
getters:{
getUserInfo(state,getters,rootState){//根节点数据通过第三个属性进行获取，
return state.userInfo
}
},
mutations:{
 changeName(state){
   state.userInfo.name='user模块中的修改的数据'
  }
 },
actions:{
 asChangeName({commit,rootState,rootGetters}){///rootState则是根state rootGetters则是根getters 当我们想在子组件中去使用根组件的数据的时候可以通过这两个属性获取
}
}
}

//main.js
import user from './'
new Vuex.store({
state:{
name:"测试数据"
},
getters:{
getName(state){ ///默认参数是state
return state.name
},
mutations:{
 changeName(state){//默认值也是state,如果有参数接受的话 单个参数直接传递，多个参数采用对象的方式进行传递
 state.name="改变后的值"
 }
},
actions:{
aschangName({commit}){//默认参数是context执行上下文
setTimeout(()=>{
 commit('changeName')
},1000)
}
,
modules:{
user
}
}
})

///在文件中进行使用
export defalut{
data(){
    return{
       testdata:'我是测试数据'
    }
},
computed:{
getusername(){
 this.$stroe.getters.user.getuserName()///  获取子模块中的getters的时候  是通过 getters.模块名称.getters名称获取
 ///如果是获取数据的话也可以通过同样的方式获取
 return this.$stroe.state.user.userInfo//获取去子模块中的数据
 
}
}
  methods:{
  //使用子模块中的方法
  handleUseMethods(){
    this.$store.commit('user/changeUserName','参数')//如果子模块中带有参数则可以传参
    this.$store.dispath('user/asChangeUserName','参数')
   }
  }
}

命名空间下子模块访问主模块

//user子模块
export default {
namespaced:true,
state:{
userInfo:{
name:"姓名",
age:12
}
},
getters:{
getUserInfo(state,getters,rootState,rootGetters){//根节点数据通过第三个属性进行获取，
//通过rootState获取主模块中的数据
return state.userInfo
}
},
mutations:{
 changeName(state){
   state.userInfo.name='user模块中的修改的数据'
  }
 },
actions:{
 asChangeName({commit,rootState,rootGetters}){///rootState则是根state rootGetters则是根   getters 当我们想在子组件中去使用根组件的数据的时候可以通过这两个属性获取
 //访问主模块中的方法
 commit('changeName','参数',{root:true})
}
}
}

函数绑定

mapState mapGetters. mapMutations,mapActions 可以将对的属性或者方法批量的引入到组件的内部,使得组件可以直接的去使用

//vue 中引入主模块
data(){
return {
...mapState(['name'])
...mapGetters(['getName'])
}
},
methods:{
...mapMutations(['changeName'])  ///在组件中使用的之后可以直接传递参数=>等价于 this.$store.commit('changeName','参数'
...mapActions(['aschangeName']) ///在组件中使用的之后可以直接传递参数=>等价于 this.$store.dispath('aschangeName','参数')
}
///vue 中引入子模块
computed: {
  ...mapState('模块地址', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('模块地址', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

其他vuex中的内部细节 后续持续更新