Vuex-Getting Started
文章目录

VueJS: Vuex - Getting Started

最简用例

比 redux 简单多了喂喂喂

引入 Vuex

1
npm install vuex --save
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';

import App from './App.vue';
import routes from './routes';

Vue.use(VueRouter);
Vue.use(Vuex);

Vue.config.productionTip = false;


/* Move the store into another file ! */
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

const router = new VueRouter({
  routes
});

/* use store as a attr to the Vue instance */
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

状态变更 以及 获取状态

这里是通过 Mutation 的概念来实现状态变更

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div height="100%" width="100%" min-width="100%">
    <button v-on:click="onTagClick">{{this.$store.state.count}}</button>
  </div>
</template>

<script>
export default {
  methods: {
    onTagClick() {
      this.$store.commit("increment");
    },
    onCellClick(row, column, event) {
      ...
    }
  }
};
</script>