Vue.js简单的状态管理:

Posted Mr-chen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js简单的状态管理:相关的知识,希望对你有一定的参考价值。

由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex

vuex 甚至集成到 vue-devtools,无需配置即可进行时光旅行调试


 

 

经常被忽略的是,Vue 应用中原始数据对象的实际来源 。

当访问数据对象时,一个 Vue 实例只是简单的代理访问

所以,如果你有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享:

const sourceOfTruth = {}

const vmA = new Vue({
  data: sourceOfTruth
})

const vmB = new Vue({
  data: sourceOfTruth
})

 子组件的实例可以通过this.$root.$data来访问sourceOfTruth.

 

问题出现:任何对数据的改变,不会留下变更过的记录。这对调试是一个噩梦!!

因此可以使用store模式:

var store = {
  debug: true,
  state: {
    message: ‘Hello‘
  },
  setMessageAction(newVaule) {
    if (this.debug) console.log(‘setMessageAction triggered with‘, newValue)
    this.state.message = newValue
  },
  clearMessageAction() {
    if (this.debug) console.log(‘clearMessageAction triggered‘)
    this.state.message = ‘‘
  }
}

 

store中的state的改变,都放置在store自身的action去管理!这就是集中方式的状态管理!

当然,每个实例/组件,可以有自己的私有状态:

var vma = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmb = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

 

组件不能直接修改属于store实例的state ,而应该执行action来分发事件通知store去改变。

这样就可以记录所有store中发生的state的改变,同时实现记录变更mutation, 保存状态快照,历史回滚/时光旅行的调试工具:具体见vuex.


 


 

 

Vuex

 

Vuex是一个全局对象,还有2个额外的功能:

  1. Vuex的state储存是响应式的。
  2. 不可以直接改变store中的state。需要使用(commit)mutation.

简单计数:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

store.commit(‘increment‘)
store.commit(‘increment‘)

store.state.count  //输出2

 

 


 

核心概念:

  • State: 保存组件的共享的状态。
  • Getter:用于state的延伸,就是computed计算属性的功能。
  • Mutation: 唯一可以改变store的状态的方法:(commit)mutation
  • Action: 只能提交Mutation,可以包括async操作。
  • Module: 解决单一状态树,导致对象过于庞大的问题。将store分割为多个module模块。相当于是嵌套子模块。

State

单一状态树,一个对象包含全部应用层级状态。 每个应用只有一个store实例。

Vuex通过store选项,把状态从根组件‘注入’到子组件中。

子组件可以通过this.$store来访问状态。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const  Counter = {
  template: `<div>count: {{ count }}</div>`,
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

var vm = new Vue({
  el: "#app",
  store,
  components: { Counter },
})

 

??mapState辅助函数和对象展开运算符(未能使用,不了解)。


 

Getter

针对state的派生的状态的操作:

(store的计算属性),getter返回值根据它的依赖被缓存起来,只当它的依赖值改变了才会被重新计算。

Getter接受state为第一个参数

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: ‘...‘, done: true },
      { id: 2, text: ‘...‘, done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

 

通过属性访问:

store.getters对象中的函数可以访问:

store.getters.doneTodos // -> [{ id: 1, text: ‘...‘, done: true }]

 

Getter可以接受其他getter作为第二个参数:我的理解,就是store.getters对象被当作第二个参数

const store = new Vuex.Store({
  //略。。
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
    
  }
})

 

我们可以在任何组件中使用getters中的函数:

const  Counter = {
  template: `<div>count: {{ count }}</div>`,
  computed: {
    count() {
      return this.$store.getters.doneTodosCount
    }
  }
}

var vm = new Vue({
  el: "#app",
  store,
  components: { Counter },
})

 

 

通过方法访问:

  getters: {
    //..略
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  },

store.getters.getTodoById(2)   
//->返回todo对象一个。{ id: 2, text: ‘...‘, done: false }

 


 

 

Mutation

 


以上是关于Vue.js简单的状态管理:的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js-vuex 详解

使用带有渲染功能的 Vue.js 3 片段

vue.js vuex store(参考)

vuex:一篇看懂vuejs的状态管理神器

vue.js的状态管理vuex中store的使用

使用 Vue 模板清晰地分离视图和代码