Vue vuex的安装和使用

1.控制台输入：npm install vuex

2.新建store.js文件用于配置vuex

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

//使用vuex插件
Vue.use(vuex)

//创建对象
const store = new vuex.Store({
  state:{
    count:1000
  },
  mutations:{

  },
  actions:{
    //异步操作就在这里发起请求
  },
  getters:{

  },
  modules:{

  }
})

//导出对象
export default store

3.vuex的使用

hello.vue中使用vuex定义的全局状态属性

<template>
  <div>
    <h2>{{$store.state.count}}</h2>
  </div>
</template>

<script>
export default {
  name: "Hello",
  props:['count']
}
</script>

<style scoped>

</style>

app.vue中使用vuex定义的全局状态属性

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{$store.state.count}}</h2>
<!-- 最好不要这样改状态 -->
    <button @click="$store.state.count++">+</button>
    <button @click="$store.state.count--">-</button>

    <h2>------------ hello ---------------</h2>
    <Hello :count="count"></Hello>
  </div>
</template>

<script>
import Hello from "@/components/Hello";
export default {
  name: 'App',
  components:{
    Hello
  },
  data(){
    return{
      message:'app组件',
      count:0
    }
  }
}
</script>

<style>

</style>

注意：不要在组件中修改store.js中定义的全局状态属性

4.浏览器安装 Vue.js devtools 插件

F12查看有没有vue选项，有的话就安装成功了

这里查看vuex状态

附上使用教程 Vuex 使用总结