Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

Vuex 使用过程演示

以vue-cli3新创建出来的项目为例，演示 Vuex 的使用过程。

创建项目:

1
2
3
vue create vuex-test
cd vuex-test
npm run serve

安装vuex:

1
npm i vuex -S

进入项目的src/下新建一个文件store/index.js，并写入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// store/index.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  // 容器 （构造函数Store开头大写）
  state: {
    // 状态
    count: 0,
  },
  mutations: {
    // 变化（使用mutations提交改变是为了方便追踪变化记录）
    increment(state) {
      state.count++;
    },
  },
});
export default store; // 导出

进入main.js 注入store，使所有vue组件能够使用vuex :

1
2
3
4
5
6
7
8
9
10
11
12
13
// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

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

现在我们可以从组件的方法提交一个变更：

1
2
3
4
5
6
methods: {
  increment() {
    this.$store.commit('increment') // .commit('<mutations里的事件名>')
    console.log(this.$store.state.count)
  }
}

在组件模板中使用状态：

1
2
3
{{ count }}

computed: { count() { return this.$store.state.count } }

state 状态的改变会触发 computed 的重新计算