cnpm install vuex -S

步骤一：先定义vuex核心的文件夹 store 并在里面加入 index.js

1、不使用  modules 的情况下，所有的文件都在   index.js中定义
state          定义字段，类似我们的页面的data
actions      这个阶段用来请求后台数据，然后把后台数据给发送到 mutations  函数方法里面
mutations  可以做逻辑操作，跟 methods  一样
getters       将state里面定义的字段发送出去

store->index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//1 定义字段，类似我们的页面的data
state: {num: 10,goods: []},

//3 这个阶段是可以做逻辑操作，跟 methods  一样 //这里的调用有两种，
(1)actions里面调用，commit('mutations里面定义的方法名',具体的参数)
(2)页面上通过  this.$store.commit('mutations里面定义的方法名',具体的参数)

    mutations: {
        mAdd(state, count) {console.log(state,count);state.num = state.num + count},
        addShopping(state, name) {state.goods.push(name)}
    },
 //2 一般情况不用这个，这个阶段用来请求后台数据，然后把后台数据给发送到 mutations  函数方法里面
    actions: {
        // 至少要有一个参数，context上下文对象,触发mutations中函数执行，或者直接改state中数据都可以
        add(context, count) {
            // 使用commit，触发mutations中得函数
            // console.log(context,count)
            context.commit('mAdd', count)  // 会触发mutations中得mAdd的执行
        },
        addShopping(context, name) {//下面的注释是伪代码
                    // 1.这里起ajax请求，检查name库存够不够,2.假设库存不够，弹个不够的消息,3.alert('库存不够了')
                    // 4.return
            context.commit('addShopping', name)
        }    }})

步骤二：在main.js中引入store，然后可以在页面用 this.store来调用store

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'///////////////////////////////////////////////////////////////////
import Vuex from "vuex";  // 引入vuex核心库////////////////////////////////////////////////
import elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Vuex) // 应用Vuex插件  也就是将Vuex插件加入到Vue对象的对象属性中
Vue.config.productionTip = false
Vue.use(elementui)
new Vue({
  router,
  store,//////////////////////////////////////////////////////////////////////////////////////
  render: h => h(App)
}).$mount('#app')

步骤三：在具体页面上使用(带modules的)，比如HomeView.vue页面

views->HomeView.vue

<template>
  <div class="home">
    <h1>1 vuex的使用 -基本使用(操作state的数据)</h1>购物车商品数量：{{ $store.state.num }}
    <br><button @click="handleAdd">点我加购物增1</button>
    <h1>组件间通信</h1>
    <ul><li>苹果<button @click="add('苹果')">+</button></li><li>桃子<button @click="add('桃子')">+</button></li><li>梨<button @click="add('梨')">+</button></li></ul>
    <br><ShppingCard></ShppingCard>
  </div>
</template>

<script>import ShppingCard from "@/components/ShppingCard";
export default {
  name: 'HomeView',data() {return {}},
  methods: {
    handleAdd() {
      // this.$store.state.num += 1//                               1 直接操作
      // this.$store.dispatch('add', 2)  //add 必须是action中得函数//  2 正统方式，通过dispatch触发actions
      this.$store.commit('mAdd', 3)//                               3 直接操作mutations
    },
    add(name) {
      // this.$store.state.goods.push(name)//                        1 直接操作
      this.$store.dispatch('addShopping', name)//                    2 正常套路
    }      },
  components: {ShppingCard}    }
</script>

components->ShppingCard.vue

<template><div>购物车商品：{{ $store.state.goods }}</div></template>
<script>export default {name: "ShppingCard"}</script>