关于vuex:vue2vuex

vuex

vuex 是一个专门为vue.js利用程序开发的状态管理模式。

vuex中，有默认的五种根本的对象：

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，能够了解为state的计算属性。咱们在组件中应用 $sotre.getters.fun()
• mutations：批改状态，并且是同步的。在组件中应用$store.commit(”,params)。这个和咱们组件中的自定义事件相似。
• actions：异步操作。在组件中应用是$store.dispath(”)
• modules：store的子模块，为了开发大型项目，不便状态治理而应用的。这里咱们就不解释了，用起来和下面的一样。

装置应用

装置vuex

npm install vuex --save

vuex调用

新建store/store.js文件，引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  count: 1
}
const mutations = {
  increment (state) {
    state.count++
  }
}
export default new Vuex.Store({
  state,
  mutations
})

main.js

引入store

import store from './store/store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

页面调用count状态

{{ $store.state.count }}

用mutations和actions 持续操作store状态

<button @click="add()">add</button>
methods: {
    add () {
     this.$store.commit('increment') //一般提交封装
    }
  }

mutations携带参数

<button @click="add(10)">add</button>
 methods: {
    add (count) {
    //  this.$store.commit('increment',count)
       this.$store.commit({ //对象提交封装
       type:'increment',
       count
     })
    }
  }
store.js文件:
const mutations = {
  increment (state,count) {
    state.counter+=count
  }
}
 //对象提交count更改 payload
   increment (state) {
   state.counter+=payload.count
}

actions异步操作

const actions = { // 异步操作
  acincrement (context) {
    state.count++
  }

应用dispath来触发

 this.$store.dispatch('acincrement')

getters

const getters = {
  getterCount(state, n = 0) {
    return (state.count += n)
  }
}
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

属性调用：

{{ $store.getters.getterCount }}

getters传参：

{ $store.getters.getterid(10) }}
getterid(state){

return age = >{
return //须要判断的数值
}
}