从零开始学VUE之VueX(安装和使用)

npm install vuex --save

使用

import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'

// 通过vue安装vuex
Vue.use(Vuex)

/**
 * 创建store
 * @type {Store<{counter: number}>}
 */
const store = new Vuex.Store({
  // 用于定义属性
  state:{
    counter:1000
  }
})

export default store

import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'

// 通过vue安装vuex
Vue.use(Vuex)

/**
 * 创建store
 * @type {Store<{counter: number}>}
 */
const store = new Vuex.Store({
  // 用于定义属性
  state:{
    counter:1000
  }
})

export default store

import Vue from 'vue'
import App from './App'
import router from './router'
// 导入store
import store from "./sotre";

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  // 挂载store
  store,
  render: h => h(App)
})

<template>
  <div id="app">
    <h2>访问store</h2>
    <h3>{{$store.state.counter}}</h3>
  </div>
</template>

<script>
import TabBar from "./components/tabbar/TabBar";
export default {
  name: 'App',
  components:{
    TabBar
  }
}
</script>

<style>
@import "./assets/css/base.css";
</style>

vuejs -> devtools