vue中怎么使用vuex

做一个简单的vuex如何使用的介绍:

先安装:

npm i vuex --save-dev

新建一个store文件夹,

在store文件夹中建一个index.js文件,在该文件中:

import Vue from 'vue'

import vuex from 'vuex'

Vue.use(vuex)

var state={　　 //state中的属性就是需要在vuex中存放的数据

name:"电脑",

　　　 age:2,

　　　 data:'布拉布拉'

}

var actions={ //异步方法,比如这里就定义了一个叫做changeName的方法

changeName(context,name){

context.commit('changeName',name)

}

var mutations={ //同步方法, 这里的方法命名最好与上面的一样,比如这里都是changeName

changeName(state,newName){

state.name=newName //改变state中的name值为newName

}

var store=new vuex.Store({

state,

actions,

mutations

})

export default store

=================================================================

在main.js文件中,引入store:

import store from './store' //vuex状态管理器

new Vue({

el:"#app",

router,

store

})

// 在组件中调用state中的数据:比如name的方式

　//在组件中触发change方法,然后再在该方法中调用vuex中的changeName方法的方式:

{

methods:{

change(){

　　　　 // 这一步与vuex中的 changeName(state,newName){ state.name=newName } 相对应, 至此,vuex中的name就被修改成了 '新电脑'

this.$store.dispatch("changeName",'新电脑')

}

总结:

state :中存放vuex中的数据

actions :中定义异步方法

mutations :中定义同步方法

　this.$store.dispatch("changeName",'新电脑') :调用vuex中的方法、传参的方式

$store.state.name ：使用vuex中的数据，比如使用name的方式

巴特西

vue中怎么使用vuex

最新文章

热门文章