vuex的使用步骤

npm install vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({})

export defaul store 

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

<template>
 <div>
 我是组件1
 </div>
</template>

<script> export default {
 
} </script>
<style scoped>
</style> 

<template>
 <div>
 我是组件2
 </div>
</template>

<script> export default {
 
} </script>
<style scoped>
</style> 

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: {},  //状态管理
 mutations: {}, //修改state
 actions: {}, //异步操作
 getters:{},  //计算属性
 modules: {}  //模块
})
export default store 

···
const store = new Vuex.Store({
 state: {
  data:0
 }  
})
··· 

 <div>
 我是组件1
 {{this.$store.state.data}} //浏览器中此处会显示data的值
 </div> 

 <div>
 我是组件2
 {{this.$store.state.data}} //浏览器中此处会显示data的值
 </div> 

mutations: {
 changeDataMut(state,params){ 
  state.data = params
 }
} 

<template>
 <div>
 我是组件1
 <button @click='changeData'>改数据</button>
 </div>
</template>
<script> export default {
 data(){
  return {
   changeData(){
   // 通过commit 触发 mutation 并传参
    this.$store.commit('changeDataMut',10) //此时组件1和组件2中data都是10啦
   }
  }
 }
} </script> 

actions: {
 changeDataAct(context,params){ //context是一个对象，从它里面把咱们需要的commit方法解构出来
  let {commit} = context
  commit('changeDataMut',params)
 }
}

<template>
 <div>
 我是组件2
 <button @click='changeData'>改数据</button>
 </div>
</template>
<script> export default {
 data(){
  return {
   changeData(){
    // 通过dispatch 触发 action 并传参
    this.$store.dispatch('changeDataAct',100)//此时data就变成100啦，并且组件1和组件2是同步的
   }
  }
 }
} </script> 

getters:{
 doubleGet(state){
  return state.data*2
 }
} 

<div>
 我是组件2
 {{this.$store.getters.doubleGet}}
</div>