vuex的使用步骤
第一步：
安装vuex：npm install vuex --save
第二步：在src下创建文件夹store及文件index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//导出实例对象
export default new Vuex.Store({
state: {
text: '1',
},
mutations: {
render(state, key) {
state.text += key;
}
}
})
第三步：在main.js中引入
import store from './store'
//加入根实例中
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
第四步：在.vue文件中使用
<template>
<div id="app">
<el-button @click="query" type="primary">查询</el-button>
<el-button @click="add" type="success">增加</el-button>
</div>
</template>
<script>
export default {
data() {
return {
msg: ""
};
},
methods: {
query() {
// console.log("获取vue中tex值:");
this.msg=this.$store.state.text;
// console.log(this.msg)
},
add(){
// this.msg +=1;
this.$store.commit('render',10);
console.log(this.$store.state.text)
}
}
};
</script>
