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>