安装VUEX

运行环境npm下，已经安装好vue，并且安装好vuex；未安装的先安装vuex，在项目根目录，src同级目录执行安装命令：npm install vuex --save

新建一个状态管理目录

这里在src目录下新建一个文件夹 stores,用来管理状态

新建mutations的函数常量，即需要用到的mutations里的每个方法，官方建议使用常量命名

这里在stores目录下新建一个mutation-types.js文件

// mutations的常量
export const COUNTINC = COUNTINC;     //自增的函数名称
export const COUNTDEC = COUNTDEC;    //自减的函数名称
export const CARTADD = CARTADD;        //购物车增加函数名称

新建主要的store管理文件，文件里管理了状态的所有操作

在stores目录下新建index.js，文件内容如下，都是测试信息，仅供学习参照

import Vue from 'vue';
import Vuex from 'vuex';

//这里把定义好的函数名称给导入
import {COUNTINC,COUNTDEC,CARTADD} from './mutation-types.js';
Vue.use(Vuex);

export default new Vuex.Store({
  state:{
    count:0,    //统计状态
    cartNum:0,  //购物车状态
  },
  mutations:{
    //count 自增
    COUNTINC(state){
      state.count++;
    },
    //count 自减
    COUNTDEC(state){
      state.count--;
    },
    //购物车的增加，模拟
    CARTADD(state,num){
      state.cartNum += parseInt(num);
    }
  },
  actions:{
    //操作count自增
    COUNTINC({commit}){
      commit('COUNTINC');
    },
    //操作count自减
    COUNTDEC({commit}){
      commit('COUNTDEC');
    },
    //action 操作cartNum
    CARTADD({commit},params){
      commit('CARTADD',params.num);
    }
  }
});

目录结构如下图所示：

页面中使用VUEX

<template>
  <div id="index">
    <router-link to="/">首页</router-link>
    <router-link to="/lists">列表页</router-link>
    <h2>你是{{title}}吗？</h2>
    <button @click="showToast('你不是【'+title+'】,滚~~');">点我查看结果</button>
    <button @click="countInc">Count++</button>
    <button @click="countDec">Count--</button>
    <p>vuex Store 里的count:{{count}}</p>
    <p>vuex Store 里的count:{{getCount}}</p>
    <p>我是Store-cartNum：{{cartNum}}</p>
    <p>
      <input type="text" v-model="cartinput">
      <button @click="cartAdd">cartNum++</button>
    </p>
  </div>
</template>
<script>
  import { Toast } from 'mint-ui';
  
  import {mapState} from 'vuex'; 
  export default {
    data() {
      return {
        title: '许山高',
        cartinput:2,
      }
    },
    methods: {
      showToast(msg) {
        Toast({
          message: msg,
          duration: 1500
        })
      },
      //store.state.count自增
      countDec() {
        //分发 action ，在action里提交
        this.$store.dispatch('COUNTDEC');
      },
      //store.state.count自减
      countInc() {
        //分发 action ，在action里提交
        this.$store.dispatch('COUNTINC');
      },
      //store.state.cartNum自增
      cartAdd(){
        //分发 action ，在action里提交，
        this.$store.dispatch('CARTADD',{num:this.cartinput});
      }
    },
    computed:{
      count(){
        return this.$store.state.count;
      },
      // 使用对象展开运算符将此对象混入到外部对象中
      ...mapState({
        getCount:'count',
        cartNum:'cartNum'
      })
    }
  }
</script>
<style>
</style>

最主要的就是下面截图这段操作store的方法了

页面显示状态，可以直接用 this.$store.state.count,也可以在页面的计算方法内映射 computed的方法内使用

computed:{
    count(){
        return this.$store.state.count;
    },
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
        getCount:'count',
        cartNum:'cartNum'
    })
}

最终样式效果