关于vuex:vue2vuex

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

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

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

装置 vuex

npm install vuex --save

新建 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
})

引入 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') // 一般提交封装
    }
  }

<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}

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

应用 dispath 来触发

 this.$store.dispatch('acincrement')

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

属性调用：

{{$store.getters.getterCount}}

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

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

关于vuex:vue2vuex

vuex

装置应用

vuex 调用

main.js

mutations 携带参数

actions 异步操作

getters

getters 传参：