learn-vuex

四个部分  state  getters  mutations action

------------------------------

安装  npm istall  vuex --save

引入main.js中

          import Vue from 'vue'

          import Vuex from 'vuex'

         Vue.use(Vuex)

创建新的实例 js文件中  let store=new VueX.store({})   export default store

注入在Vue实例中   app.vue中

new Vue({

store

  })

---

简单例子

const store=new  Vuex.store({

state:{  count:12},

mutations:{

    changeCount(state){

     state.count++

   }}

})

---

state  存数据  只有mutation的提交才能更改 state

组件内部访问 this.$store.state.count

import {mapState} from 'vuex'

computed:{

...mapState({

count:function(state){ state.count  }

})

}

---

mutations  存方法更改state

   this.$store.commit(mutations名字，payload)

事件=》触发对象的方法=》mutations触发  修改对应的state值

methods:{

dosomething(){    this.$store.commit(mutations名字,payload)}

}

import {mapMutations} from 'vuex'

methods:{

dosomething(){

...mapMutations({

abc:(state)=>{}})

}

}

---

getters 等同于computed

依赖值更新才重复计算

getters:{

fn(state,getters){

}

}

---

actions 异步操作  this.$store.dispatch('mutation名')

actions:{

fn名字(context，state){

}}

context等同于store  store的方法它全都有

context.mutations  context.getter  context.state

actioins:{

fn({commit,state}){

commit(‘提交的mutation’)}

}

---