目录
一、安装vuex
当然,如果使用脚手架,已经选择了使用vuex,这步可以跳过
1、安装vuex
npm install vuex
2、创建vuex
1、在src目录下创建store目录,并在此目录下创建index.js(这点见仁见智,看个人喜好创建目录结构)
2、引入vue和vuex;并将vuex安装到vue上。
3、创建并导出vuex.store
4、在main.js中引入vuex并注册
store目录下的index.js的基本结构:
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
export default new Vuex.Store({
// 存放数据
state:{
},
// 修改数据(通常只实现一个功能)
mutations:{
},
// 也是修改数据,可以支持异步修改数据(通常在里面实现复杂处理)
actions:{
},
// 获取数据(功能基本同计算属性)
getters:{
}
})
main.js中的引入和使用:
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入vuex仓库
import store from './store/index';
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
// 注册使用vuex仓库
store,
router,
components: { App },
template: '<App/>'
})
二、vuex的使用
在state中保存数据,通过mutations中的方法修改
组建中使用this.$store.state.count(或者getters)来得到数据,在事件函数中使用this.$store.commit调用mutations中的方法来修改数据。
store代码:
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
export default new Vuex.Store({
// 存放数据
state:{
count:1
},
// 修改数据(通常只实现一个功能)
mutations:{
increment (state) {
state.count++
}
},
// 也是修改数据,可以支持异步修改数据(通常在里面实现复杂处理)
actions:{
},
// 获取数据(功能基本同计算属性)
getters:{
}
})
组件代码:
<template>
<div class="hello">
{{this.$store.state.count}}
<button @click="add">+</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
},
methods:{
add(){
this.$store.commit('increment');
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果:
actions使用this.$store.dispatch()来调用,其他的同mutations。