(一) VueX入门

本节知识点

• Vuex 入门

概述

• Vuex 是一个专门为vue.js设计的集中欧冠状态管理架构，也就是比如说多个页面共用数据。类似仓库

使用

• (一) 安装vuex

npm i vuex --save

• (二) 在src目录下面新建一个vuex文件夹，并在下面新建store.js，文件中引入vue和vuex

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state={
  score:1
};
//必须是mutations不能更改
const mutations = {
    add:function(state){state.score++;},
    del:function(state){state.score--;}

}
export default new Vuex.Store({
  state,
  mutations
})

• (三) 在指定的页面上写入方法

• 首先必须要引入store文件

• 其次属性里面需要这个store

<template>
    <div>
       <div>
         {{msg}}
       </div>
      <div>
         分数是{{$store.state.score}}
      </div>
      <div>
        <button @click="$store.commit('add')">添加</button>
        <button @click="$store.commit('del')">减少</button>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import store from "@/vuex/store"
    export default {
         data(){
           return {
             msg:"测试vuex"
           }
         },
         store
    }
</script>

<style scoped>

</style>

这样就可以了