本节知识点
- 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>
这样就可以了
