Vuex知识点总结

内容来自尚硅谷教学课件

6.1. vuex 理解

6.1.1. vuex 是什么

1. github 站点: https://github.com/vuejs/vuex
2. 在线文档: https://vuex.vuejs.org/zh-cn/
3. 简单来说: 对vue 应用中多个组件的共享状态进行集中式的管理(读/写)

6.1.2. 状态自管理应用

1. state: 驱动应用的数据源
2. view: 以声明方式将state 映射到视图
3. actions: 响应在view 上的用户输入导致的状态变化(包含n 个更新状态的方法)
   
   
   

6.1.3. 多组件共享状态的问题

1. 多个视图依赖于同一状态
2. 来自不同视图的行为需要变更同一状态
3. 以前的解决办法
   a. 将数据以及操作数据的行为都定义在父组件
   b. 将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)
4. vuex 就是用来解决这个问题的

6.2. vuex 核心概念和API

6.2.1. state

1. vuex 管理的状态对象
2. 它应该是唯一的

const state = {
	xxx: initValue
}

6.2.2. mutations

1. 包含多个直接更新state 的方法(回调函数)的对象
2. 谁来触发: action 中的commit(‘mutation 名称’)
3. 只能包含同步的代码, 不能写异步代码

const mutations = {
	yyy (state, {data1}) {
		// 更新state 的某个属性
	}
}

6.2.3. actions

1. 包含多个事件回调函数的对象
2. 通过执行: commit()来触发mutation 的调用, 间接更新state
3. 谁来触发: 组件中: $store.dispatch(‘action 名称’, data1) // ‘zzz’
4. 可以包含异步代码(定时器, ajax)

const actions = {
	zzz ({commit, state}, data1) {
		commit('yyy', {data1})
	}
}

6.2.4. getters

1. 包含多个计算属性(get)的对象
2. 谁来读取: 组件中: $store.getters.xxx

const getters = {
	mmm (state) {
		return ...
	}
}

6.2.5. modules

1. 包含多个module
2. 一个module 是一个store 的配置对象
3. 与一个组件(包含有共享数据)对应

6.2.6. 向外暴露store 对象

export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters
})

6.2.7. 组件中

import {mapState, mapGetters, mapActions} from 'vuex'
export default {
	computed: {
		...mapState(['xxx']),
		...mapGetters(['mmm']),
	}
	methods: mapActions(['zzz'])
}
{{xxx}} {{mmm}} @click="zzz(data)"

6.2.8. 映射store

import store from './store'
	new Vue({
	store
})

6.2.9. store 对象

1. 所有用vuex 管理的组件中都多了一个属性$store, 它就是一个store 对象
2. 属性:
   state: 注册的state 对象
   getters: 注册的getters 对象
3. 方法:
   dispatch(actionName, data): 分发调用action

6.3. demo1: 计数器

6.3.1. store.js

/**
 * vuex 的store 对象模块
 */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/*
state 对象
类似于data
*/
const state = {
  count: 0 // 初始化状态数据
}
/*
mutations 对象
包含个方法: 能直接更新state
一个方法就是一个mutation
mutation 只能包含更新state 的同步代码, 也不会有逻辑
mutation 由action 触发调用: commit('mutationName')
*/
const mutations = {
  //增加的mutation
  INCREMENT(state) {
    state.count++
  },

  //减少的mutation
  DECREMENT(state) { // ctrl + shift + x
    state.count--
  }
}
/*
actions 对象
包含个方法: 触发mutation 调用, 间接更新state
一个方法就是一个action
action 中可以有逻辑代码和异步代码
action 由组件来触发调用: this.$store.dispatch('actionName')
*/
const actions = {

  //增加的action
  increment({
    commit
  }) {
    //提交增加的mutation
    commit('INCREMENT')
  },

  //减少的action
  decrement({
    commit
  }) {
    //提交减少的mutation
    commit('DECREMENT')
  },

  //带条件的action
  incrementIfOdd({
    commit,
    state
  }) {
    if (state.count % 2 === 1) {
      commit('INCREMENT')
    }
  },

  //异步的action
  incrementAsync({
    commit
  }) {
      //在action中直接就可以执行异步代码
    setTimeout(() => {
      commit('INCREMENT')
    }, 1000)
  }
}
/*
getters 对象
包含多个get 计算计算属性方法
*/
const getters = {
  oddOrEven(state) { //不需要调用，只需要读取属性值
    return state.count % 2 === 0 ? '偶数' : '奇数'
  },
  count(state) {
    return state.count
  }
}
// 向外暴露store 实例对象
export default new Vuex.Store({
  //构造函数
  state, //状态
  mutations, //包含多个更新state函数的对象
  actions, //包含多个对应事件回调函数的对象
  getters //包含多个getter计算属性函数的对象
})

6.3.2. main.js

import  Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
    el: '#app',
    components: {App},
    template: '',
    store // 所有组件都多个一个属性: $store
})

6.3.3. app.vue(未优化前)

6.3.4. app2.vue(优化后)

6.4. demo2: todo list

6.4.1. store/types.js

/**
* 包含多个mutation name
*/
export const RECEIVE_TODOS = 'receive_todos'
export const ADD_TODO = 'add_todo'      //添加todo
export const REMOVE_TODO = 'remove_todo'
export const DELETE_DONE = 'delete_done'
export const UPDATE_ALL_TODOS = 'update_all_todos'

6.4.2. store/mutations.js

//包含多个由action触发去直接更新状态的方法对象
import {
  RECEIVE_TODOS,
  ADD_TODO,
  REMOVE_TODO,
  DELETE_DONE,
  UPDATE_ALL_TODOS
} from './types'
export default {
  [RECEIVE_TODOS](state, {
    todos
  }) {
    state.todos = todos
  },
  [ADD_TODO](state, {
    todo
  }) {
    state.todos.unshift(todo)
  },
  [REMOVE_TODO](state, {
    index
  }) {
    state.todos.splice(index, 1)
  },
  [DELETE_DONE](state) {
    state.todos = state.todos.filter(todo => !todo.complete)
  },
  [UPDATE_ALL_TODOS](state, {
    isCheck
  }) {
    state.todos.forEach(todo => todo.complete = isCheck)
  }
}

6.4.3. store/actions.js

// 包含多个接受组件通知触发mutation调用，间接更新状态的方法对象
import storageUtil from '../util/storageUtil'
import {
  RECEIVE_TODOS,
  ADD_TODO,
  REMOVE_TODO,
  DELETE_DONE,
  UPDATE_ALL_TODOS
} from './types'
export default {
  readTodo({
    commit
  }) {
    setTimeout(() => {
      const todos = storageUtil.fetch()
      // 提交commit 触发mutation 调用
      commit(RECEIVE_TODOS, {
        todos
      })
    }, 1000)
  },
  addTodo({
    commit
  }, todo) {
    commit(ADD_TODO, {
      todo
    })
  },
  removeTodo({
    commit
  }, index) {
    commit(REMOVE_TODO, {
      index
    })
  },
  deleteDone({
    commit
  }) {
    commit(DELETE_DONE)
  },
  updateAllTodos({
    commit
  }, isCheck) {
    commit(UPDATE_ALL_TODOS, {
      isCheck
    })
  }
}

6.4.4. store/getters.js

// 含有多个计算属性对象
export default {
  todos(state) {
    return state.todos
  },
  totalSize(state) {
    return state.todos.length
  },
  completeSize(state) {
    return state.todos.reduce((preTotal, todo) => {
      return preTotal + (todo.complete ? 1 : 0)
    }, 0)
  },
  isAllComplete(state, getters) {
    return getters.totalSize === getters.completeSize && getters.totalSize > 0
  }
}

6.4.5. store/index.js

/*
vuex最核心的管理对象store
*/

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
Vue.use(Vuex)
const state = {
  todos: []
}
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

6.4.6. components/app.vue

6.4.7. components/todoHeader.vue

6.4.8. components/todoMain.vue

6.4.9. components/todoItem.vue

6.4.10. components/todoFooter.vue

6.4.11. util/storageUtil.js

// 使用localStorage存储数据的工具模块
// 1.函数       ：1个功能
// 2.对象       ：2个功能
// 需要向外暴露1个功能还是多个功能

var STORAGE_KEY = 'todos'
export default {
  fetch() {
    return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
  },
  save(todos) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}

6.4.12. base.css

/*base*/
body {
    background: #fff;
  }
  
  .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  
  .btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
  }
  
  .btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
  }
  
  .btn:focus {
    outline: none;
  }

6.4.13. main.js

import  Vue from 'vue'
import App from './components/App.vue'
import store from './store'
import './base.css'

new Vue({
    el: '#app',
    components: {App},
    // template: '',
    render: h => h(App),
    store
})

6.5. vuex 结构分析