关于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 // 须要判断的数值}
}