vuex

目录

1、简介

2、vuex的简单实现，计时器的例子

3、getter的简单例子

 

---

1、简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

2、vuex的简单实现，计时器的例子

在main.js中引入

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    increment(state) {
      state.count ++
    }
  },
  actions: {

  }
})

使用：

//在任意组件中使用，由复杂都简单的获取方式

3、getter的简单例子

store/index

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todos: [{
      id: 1, text: "text1", done: true
    }, {
      id: 2, text: "text2", done: false
    },{
      id: 3, text: "text3", done: true
    }]
  },
  //可以将state中的数据处理成自己需要的数据，
  /*
  Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。
  就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，
  且只有当它的依赖值发生了改变才会被重新计算
  */
  //  接受state作为第一个参数，其它getter作为第二个参数
  getters: {
    // 通过属性访问
    doTodos: (state) => {
      return state.todos.filter(todo => todo.done)
    },
    //通过方法访问,适用于对 store 里的数组进行查询
    doTodos1: (state) => (id) => {
      return state.todos.find(todo => todo.done === id)
    },
  },
  mutations: {

  },
  actions: {

  }
})

使用

4、