1.vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储,管理应用中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
2.为什么要使用vuex
- 进行统一的状态管理,解决不同组件共享数据的问题。
- 不同视图需要变更同一状态的问题。
- 使用vuex之后,状态变化更加清晰。
3.如何使用vuex
- 安装引入 npm install vuex --save
- 注册到vue中
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex
- 实例化vuex的store
const store = new Vuex.Store({ state: { count: 0, title:'vuex中的title' }, mutations: { increment(state,count) { state.count=count } } })
- 挂载在vue实例上
new Vue({ store })
- 在组件中就可以通过this.$store对vuex进行操作。
4.vue核心概念
4.1 state
- state是什么? 是一个单一状态树,是vuex中为一个的数据源,我们的数据都是放在state中的。
- 组件中去取state的值,通过this.$store.state,
- 或者可以通过计算属性取得,mapState辅助函数,可以简化操作
import {mapState} from "vuex"; computed: { // 可以写一些其他的计算属性 ...mapState({ // title: state => state.title // title: "title" title: state => { return state.title; } }) }
4.2 getters
- 对state中的数据进行加工(派生)
- 取getters中的值,通过this.$store.getters,
- 或者通过计算属性取,getters也有辅助函数mapGetters, 用法和mapState一致。
import { mapGetters} from "vuex"; computed: { // 可以写一些其他的计算属性 ... mapGetters ({ title: "title" }) }
4.3 mutation
- 修改state中的值,我们state每次变化,都应该由mutation去修改,方便追踪数据的流转。
- 定义mutation
const store = new Vuex.Store({ // .... mutations: { increment(state, count) { state.count = count }, [CHANGE_TITLE](state, payload) { state.title = payload.title; // 不能这么写的 state.obj = { ...state.obj, title:payload.title } } } })
- 调用mutation
this.$store.commit('mutation类型(函数名)',"参数,参数一般是对象形式")
this.$store.commit({type:'mutation类型(函数名)'},...其他参数)
4. 注意事项
- 要遵循vue相应式变化的规则,简单说就是对于对象的赋值,要用新对象替换老对象。
- mutation的type或者说是函数名可以用常量维护。
- mutation函数必须是同步的。
4.4 action
- action类似于mutation,不同的是
- action可以包含异步操作
- action不能直接修改state,如果想修改state的话,需要触发mutation
- 怎么定义?
actions: { // 通过context(上下文环境)可以触发mutation,触发action,获取state、getter等操作 // 第二个参数就是我们传递过来的参数 changeTitle(context,payload) { setTimeout(() => { context.commit(CHANGE_TITLE, payload) }, 1000); } }
- 怎么触发action
- this.$store.dispatch('action名字','参数')
- this.$store.dispatch({type:'action类型(函数名)'},...其他参数)
4.5 module
- 由于使用单一的状态树,项目中的状态会集中在一起,导致难以维护,这个时候可以通过module对store进行拆分。
- 使用module之后,每个模块都有自己的state、mutation等内容,方便维护
- 如何定义
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } })
4.命名空间
默认state就是有命名空间
如果想给mutation和action也加上命名空间的话,这里设置模块的namespaced:true
const moduleA = {
namespaced:true,
state: { ... },
mutations: {
changeName(){}
},
actions: { ... },
getters: { ... }
}
// this.$store.commit('a/changeName')
5.命名空间之后使用辅助函数createNamespacedHelpers