什么是vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态。它的核心是 store(仓库)。”store” 基本上就是一个容器,它包含着应用中大部分的状态(state),改变 状态的唯一途径就是显式地提交(commit) mutations。(详细介绍见:http://vuex.vuejs.org/zh-cn/)
如何安装vuex?
借助npm安装vuex,执行命令:npm install –save vuex
该命令将vuex安装为依赖模块。
如何使用vuex?
以下是vuex的简单示例:
store.js文件:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count: 0
},
mutations:{
CHANGE_COUNT: (state)=>state.count++
},
actions:{
changeCount: ({commit})=>commit('CHANGE_COUNT')
}
})
index.vue文件:
<template>
<div>
<p>{{$store.state.count}}</p>
<p><input type="button" value="提交" @click="changeCount" /></p>
</div>
</template>
<script>
export default {
methods: {
changeCount(){
this.$store.commit('CHANGE_COUNT')
}
}
}
</script>
main.js文件:
import Vue from 'vue'
import Router from 'vue-router'
import App from './index'
import store from './store'
Vue.use(Router);
const routes = [
{
path: '/',
name: 'App',
component: App
}
];
new Vue({
el: '#app',
router: routes,
store,
template: '<App/>',
components: { App }
})
本文概念参照网址:http://vuex.vuejs.org/zh-cn/