vuex简单使用示例

1、创建vue项目

参考https://www.jianshu.com/p/fbfa235453a3

vue create vuex-store-test

2、导入vuex，新建vuex.store并导出

目录结构
src
--store
----index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
})

export default store

3、使用store

<template>
  <div class="hello">
    <h1>begin</h1>
    <h1>{{ count }}</h1>
    <h1>end</h1>
  </div>
</template>
##引入store
import store from "@/store";

export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      message: 'welcome',
      ##使用store
      count: store.state.count
    }
  },
  methods: {
    increment() {
      store.commit('increment')
      console.log(this.$store.state.count)
    }
  }

4、运行项目并访问

npm install --save vuex
npm run serve