vuex的使用

1.安装vuex

使用npm

 npm install vuex

使用yarn

yarn add vuex

2.创建一个 文件夹store，在文件夹中创建一个index.js文件

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

3.配置 Vuex store

export default new Vuex.Store({

//定义name

state:{

name:""

},

//修改state中name的值的方法

mutations: {

  updateName(state, name) {

  state.name = name

},

//获取state中name的值

getclaim(state) {

  return state.name

},

//异步调用mutations的方法

actions: {

asyncUpdateName(context, name) {

context.commit('updateName', name)

},

}

})

4.在vue组件中使用

//获取name的值

let name=this.$store.getters.getName.    //在方法中使用  

{{this.$store.getters.getclaim}}           //在模版中使用

//修改name的值

this.$store.dispatch('asyncUpdateName',data)。 //data:name的新值