初次使用Vuex步骤详解

一、新建工程

1、在cmd中使用vue cli新建：vue create vuex-demo

2、选用默认配置（也可以选用自定义自己勾选vuex支持）

3、进入目录：cd vuex-demo

4、安装vuex：npm i vuex

5、启动项目：npm run serve

6、进入8080端口，出现以下界面说明配置成功

二、实现一个简单的vuex状态管理

1、用vscode打开文件夹

2、在main.js中代码如下

import Vue from 'vue'
import Vuex from 'vuex'	//1
import App from './App.vue'

Vue.use(Vuex)	//2
Vue.config.productionTip = false

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

new Vue({
  store, 	//4
  render: h => h(App),
}).$mount('#app')

3、在App.vue中代码如下

<template>
  <div id="app">
    {{ count }}
    <button @click="$store.commit('increment')">count++</button>
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
};
</script>

<style>
</style>

4、完成后如下，点击count++按钮实现数据累加

至此，一个简单的vuex使用步骤就到此结束了。