- vue 插件 npm install vuex --save
- 将多个组件的共享状态进行 集中式管理 - 极易破坏单向数据流
- 多个视图依赖于同一状态 ----- 就 props 而言：嵌套组件传参繁琐，兄弟组件传参无能为力
- 来自不同视图的行为需要变更同一状态
将组件的共享状态抽取出来： 组件共享的数据、后台请求数据
- 核心对象 store
向外暴露 store 对象
状态自管理应用 分为
state -------- 驱动应用的 数据源
view -------- 以声明方式将 state 映射到视图 - template
actions -------- 响应有用户在 view 上的用户输入导致的状态变化 - methods: {}
action 中的 commit() 来触发 mutation 的调用，间接更新 state
一个 action 中可能有多个 commit("mutation的名字", 传参给mutation)
开发工具 会监视 mutations
---------------------------------------------------------------------------------------
src/store.js -------- vuex 最核心的管理模块
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = { // 包含所有状态数据的对象，相当于 data
count: 1 // 指定初始状态数据
};
const actions = { // 包含 n 个用于间接更改共享状态数据方法的对象 - 分析对状态数据的几个间接操作
increment ({commit}) {commit("INCREMENT")}
decrement ({commit}) {commit("DECREMENT")}
incrementIfOdd ({commit, state}) {if(state.count%2===1)commit("INCREMENT")}
// 不像 react-thunk 才能实现 redux 的异步，vuex 本身就可以异步
incrementAsync ({commit}) {setTimeout(()=>commit("INCREMENT"), 1000)}
};
const mutations = { // 包含 n 个用于直接更改共享状态数据方法的对象 - 分析对状态数据的几个直接操作
INCREMENT (state) {state.count++}
DECREMENT (state) {state.count--}
};
const getters = { // 包含了 计算属性 的定义
evenOrOdd(state){return state.count % 2 === 0 ? '偶数' : '奇数'}
};
export default new Vuex.Store({
state,
actions,
mutations,
getters
});
---------------------------------------------------------------------------------------
src/main.js
-
import Vue from 'vue' import App from './App.vue' import store from './store/index' /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>', store })
src/App.vue -------- 组件中使用 vuex 管理的状态数据 - ViexModel 即 组件对象的 this 会多一个 $store 对象
...
methods: {
increment () {this.$store.dispatch("increment")}
decrement () {this.$store.dispatch("decrement")}
incrementIfOdd () {this.$store.dispatch("incrementIfOdd")}
incrementAsync () {this.$store.dispatch("incrementAsync")}
}
...
------------------------------------ 简化写法 ------------------------------------
import {mapState, mapGetters, mapActions} from "vuex"
...
computed: {
...mapState(["count"]), // 函数返回有一个对象，拆包解构以后再放入另一个对象
....mapGetters(["evenOrOdd"])
} // 相当于：
methods: {...mapActions(["increment", "decrement", "incrementIfOdd", "incrementAsync"])} // 用的少？因为只适合只有 this.$store 的函数
...
Vuex.Store({ modules: {...} }) --------- 大型项目，按 功能模块 合理拆分 store
Vuex 允许我们将 store 分割成模块（module）。
每个模块拥有自己的 state、mutation、action、getter、
甚至是嵌套子模块——从上至下进行同样方式的分割
- 对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象
- 同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState
- 对于模块内部的 getter，根节点状态会作为第三个参数暴露出来
5
5