vue init webpack vuextest npm install vuex --save

在src/main.js中引入store

import Vue from 'vue'
import App from './App'
import router from './router'
/* 新增 */
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  /* 新增 */
  store,
  components: { App },
  template: '<App/>'
})

state

在src/store/index.js中vue使用vuex组件，并在Vuex.Store实例中创建变量count，保存在store中，最后使用export default导出store

import Vue from 'vue'
import Vuex from 'vuex'

// vue使用vuex
Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 1
    }
})

export default store

页面可以通过this.$store.state获取到定义的数据，修改一下src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ this.$store.state.count }}</h1>
  </div>
</template>

可能需要修改一下config/index.js，将host改为0.0.0.0，然后启动服务

npm run dev

getters

getter就是vue的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果

store代码

const store = new Vuex.Store({
    state: {
        count: 1
    },
    getters: {
        getStateCount: function(state){
            return stata.count + 1
        }
    }
})

页面可以使用this.$store.getters.getStateCount来使用

vue代码

<template>
  <div class="hello">
    <h1>state.count: {{ this.$store.state.count }}</h1>
    <h1>getters.getStateCount: {{ this.$store.getters.getStateCount }}</h1>
  </div>
</template>

mutations

mutations用于修改state的数据

store代码

const store = new Vuex.Store({
    state: {
        count: 1
    },
    getters: {
        getStateCount: function(state){
            return state.count + 1;
        }
    },
    mutations: {
        add(state){
            state.count = state.count + 1;
        },
        del(state){
            state.count = state.count - 1;
        }
    }
})

vue代码

<template>
  <div class="hello">
    <h1>state.count: {{ this.$store.state.count }}</h1>
    <h1>getters.getStateCount: {{ this.$store.getters.getStateCount }}</h1>
    <button @click="addFun">+</button>
    <button @click="delFun">-</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    addFun(){
      this.$store.commit("add");
    },
    delFun(){
      this.$store.commit("del");
    }
  }
}
</script>

可以进行加减

action

刚才是直接通过vue的method直接执行mutations，加入action后method直接调用this.$store.dispatch调用对应的action，由action来执行

store代码

const store = new Vuex.Store({
    state: {
        count: 1
    },
    getters: {
        getStateCount: function(state){
            return state.count + 1;
        }
    },
    mutations: {
        add(state){
            state.count = state.count + 1;
        },
        del(state){
            state.count = state.count - 1;
        }
    },
    actions: {
        addFun(context){
            context.commit("add");
        },
        delFun(context){
            context.commit("del");
        }
    }
})

vue代码

<template>
  <div class="hello">
    <h1>state.count: {{ this.$store.state.count }}</h1>
    <h1>getters.getStateCount: {{ this.$store.getters.getStateCount }}</h1>
    <button @click="addFun">+</button>
    <button @click="delFun">-</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    addFun(){
      this.$store.dispatch("addFun");
    },
    delFun(){
      this.$store.dispatch("delFun");
    }
  }
}
</script>

还可以传递参数

store代码

<template>
  <div class="hello">
    <h1>state.count: {{ this.$store.state.count }}</h1>
    <h1>getters.getStateCount: {{ this.$store.getters.getStateCount }}</h1>
    <button @click="addFun">+</button>
    <button @click="delFun">-</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    addFun(){
      var n=10;
      this.$store.dispatch("addFun", n);
    },
    delFun(){
      this.$store.dispatch("delFun");
    }
  }
}
</script>

vue代码

const store = new Vuex.Store({
    state: {
        count: 1
    },
    getters: {
        getStateCount: function(state){
            return state.count + 1;
        }
    },
    mutations: {
        add(state){
            state.count = state.count + n;
        },
        del(state){
            state.count = state.count - 1;
        }
    },
    actions: {
        addFun(context){
            context.commit("add", n);
        },
        delFun(context){
            context.commit("del");
        }
    }
})

再度点+按钮就是+10了