Vuex主要是实现数据持久化和组件之间数据共享的插件。
使用方式,
- 首先安装vuex
npm install vuex --save
- 然后引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
- 创建一个状态或者数据管理器,比如这里count
var state= {
//举个例子,比如记录一个count数值
count: 0
}
- 用mutations来管理一些方法,这些方法可以管理状态或者数据
var mutations= {
//新建一个方法,用来给count计数
increment () {
state.count++
}
}
- 然后暴露出去
const store = new Vuex.Store({
state: state,
mutations: mutations
})
export default store;
- 其他组件导入store,在js里面和data同级,写入store
//获取count的值
this.$store.state.count
//调用increment的方法
this.$store.commit('increment')
store.js完整代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
var state= {
count: 0
}
var mutations= {
increment () {
state.count++
}
}
const store = new Vuex.Store({
state: state,
mutations: mutations
})
export default store;
在组件内调用vuex的代码
<template>
<div>
<mt-button v-on:click="addCount()">vuex数量加一</mt-button>
<h3>{{this.$store.state.count}}</h3>
</div>
</template>
<script>
import store from './../../vuex/Store.js';
export default {
//注意导入store
store,
methods: {
addCount(){
this.$store.commit('increment')
}
}
};
</script>