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