vuex安装及简单使用（一）

安装及简单使用（一）
命令行输入cnpm install vuex --sav或yarn add vuex
1、main.js导入vuex

import Vuex from 'vuex';
import 'es6-promise/auto';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
new Vue({
    store,
    render: h => h(App),
}).$mount('#app')

2、页面使用，store可以理解为一个全局变量，改变变量时必须通过提交 mutation 的方式，不能直接改变store.state.count

<template>
  <div class="home">
    页面一
    <van-button type="primary" @click="control()">控制store</van-button>
    <div>{{this.$store.state.count}}</div>
  </div>
</template>

<script>

export default {
  name: "About",
  components: {},

  data() {
    return {};
  },
  methods: {
    control() {
      this.$store.commit("increment");
    },
  },
  mounted() {},
};
</script>

<template>
  <div class="home">
    页面二
    <van-button type="primary" @click="control()">控制store</van-button>
    <div>{{this.$store.state.count}}</div>
  </div>
</template>

<script>

export default {
  name: "About",
  components: {},

  data() {
    return {};
  },
  methods: {
    control() {
      this.$store.commit("increment");
    },
  },
  mounted() {},
};
</script>