Vuex

在线示例

Vuex状态管理流程

view---(actions)---mutaions---state---view

actions vs mutaions

view可以直接操纵mutations

• actions 支持异步操作, mutations 不支持
• actions 是可有可无的, 而不是必须的

如何引入Vuex 创建Store仓库

new Vuex.Store 必须大写

// main.js
import Vuex from "vuex";

Vue.use(Vuex);
let store = new Vuex.Store({ // Store必须大写
  state: {
    num: 1
  }
});


new Vue({
  render: (h) => h(App),
  store
}).$mount("#app");

View中如何获取数据

this.$store.state.num;

getters

getters可以对获取的state做一些处理,之前获取数据是this.$store.state.xxx, 使用getters可以是this.$store.getters.方法名

直接通过mutations操作数据

this.$store.commit('mutationType')

通过actions操作数据

this.$store.dispatch("increaseAction");