vuex详情

发布时间:2019-01-10 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了vuex详情脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

title: vuex详情 date: 2018-08-20 11:57:55 tags: vuex

vuex中的几个属性的示例以及解析 vuex - state 在这个示例中主要通过 const store 创建了一个新的new Vuex.Store实例然后放在了 app中 所以app中的computed就可以用this.$store来调用里面的东西 所以在div中就可以的到数据 state就是专门用来保存各组件的数据的 示例:

const store = new Vuex.Store({
state:{
msg:数据
}
})

const app = new Vue({
el:'#app',computed:{
msg(){
return this.$store.state.msg
}
}
})

2.vuex - getter的作用 getter 的作用是对state进行处理,并得到新的数据getter 接受 state作为其第一个参数 目的方便获取state getter 接受 getters作为其第二个参数 例如:getters:{ watchedMovies(state,getters){ return ..... } } 具体事例 getters: { // getters和computed类似 watchedMovies (state) { return state.movies.filter(movie => movie.watched) movies是state中的数组 在这里可以直接通过传参的形式调用 并获取里面的movies数据并通过过滤器返回里面的看过的电影的名字 },noWatchMovies (state) { return state.movies.filter(movie => !movie.watched) },注意这里面的参数的形式 watchedMoviesLength (state,getters) { return getters.watchedMovies.length },getMovieById (state) { console.log(2) return (id) => { return state.movies.filter(movie => movie.id === id)[0] } } } getter不止可以从state中 获取新的数据 也可以从其他getter中获取新的数据 getter在正常使用时,获取到的直接就是对应的数据。有些时候需要获取对应条件的数据 不管是state还是getters都只是用来存储数据 在getter中是用函数的形式对state中的数据进行处理 computed 用法是像data一样直接使用 写法是像methods一样

 总结:const store = new Vuex.Store({})中两个属性 state是存储数据的 getters是对数据进行处理后返回新的数据的但是不管是不是处理后的数据都需要经过computed里面返回 方便调用

vuex - mutation

mutation中接受两个参数 state作为其一个参数 因为mutation就是改变state payload作为其第二个参数 载荷 尽量为对象
mutation 需要commit触发 $store.commit()
mutation想要使用,就在对应组件的methods触发的函数中,调用this.$store.commit('mutation名字',载荷)
相当于自定义事件中的$emit 创建mutation的位置相当于自定义事件$on
```
mutations:{
  //mutation就是修改state数据
  mutation名字(state,payload){
    //payload就是commit mutation时传递过来的数据
    //根据payload修改state
  }
}
```
在对应的组件中设置触发函数,一般是原生事件函数
methods:{
  原生事件函数名(){
    //触发mutation
    this.$store.commit('mutation名字',payload)
  }
}
在提交mutation时可以使用
  this.$store.commit('mutation名字')
还可以使用对象形式的commit
  this.$store.commit({
    type: 'mutation名字',数据1:数据值,数据2:数据值
  })

在接收到payload就包含了对象中所有的信息
mutation就是用来直接设置state的(只能同步设置)

vuex - actions
所有的异步操作都应该放在action中
action就是通过调用mutation里的函数实现异步加载
action不能去修改state 所以最后的执行代码永远是commit(mutation)
参数context就是个阉割版的store
context中包含有
commit //触发mutation
dispatch
getters
state 不要再action中修改 只能获取其中的值
action中也可以附带载荷,使用方法和mutation一致
示例:

    const store = new Vuex.Store({
  state: {
    count: 1
  },mutations: {
    addCount (state) {
      state.count++
    }
  },actions: {
    addCountAsyncAction ({commit,state}) {
      // action不能去修改state 所以最后的执行代码永远是commit(mutation)
      /* 
        参数context就是个阉割版的store
        context中包含有
          commit
          dispatch
          getters
          state  不要在action中修改,只能获取其中的值
        action中也可以附带载荷,使用方法和mutation一致
      */

      // console.log(context)
      setTimeout(() => {
        // 调用commit触发mutation
        commit('addCount')
      },2000)
    }
  }
})

const app = new Vue({
  el: '#app',store,computed: {
    count () {
      return this.$store.state.count
    }
  },methods: {
    addCountAsync () { // 同步
      this.$store.commit('addCount') // 触发mutation
    },addCountSync () { // 异步
      this.$store.dispatch('addCountAsyncAction')          
    },}
})

总结

以上是脚本之家为你收集整理的vuex详情全部内容,希望文章能够帮你解决vuex详情所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: