Vue官方文档（48）: vuex的基本使用

1.在package.json中增加vuex

"vuex": "^3.6.2"
1

2.运行npm install
3.在src目录下新建store目录，在store目录中创建文件store.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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4.在需要的页面引入store,并使用

//路径
import store from './store/store'
1
2

  store.commit('increment');
  alert(store.state.count);
1
2

也可以在根实例中引入上述store. 修改main.js
1)

import store from './store/store'

1
2

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')
1
2
3
4
5

3)之后就可以全局使用store了

          alert(this.$store.state.count);

1
2