什么是 vuex?
Vuex 是一个专为 vue.js 应用程序开发的状态管理模式. 它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vue 的官方调试工具 devtools extension, 提供了诸如零配置的 time-travel 调试, 状态快照导入导出等高级调试功能.
如何使用?
一, 安装
NPM install vuex --save
二, 配置
在 src 下新建 store, 新建 store.JS
然后代码如下:
- import Vue from 'vue';
- import Vuex from 'vuex';
- Vue.use(Vuex);
- let store = new Vuex.Store({
- // 1. state, 类似于储存全局变量的容器
- state:{
- isPhone:false
- },
- // 2. getters, 提供用来获取 state 数据的方法
- getters:{
- getType(){
- return state.isPhone
- }
- },
- // 3. actions
- // 提供与后台接口打交道的方法, 并调用 mutations 提供的方法
- actions:{
- },
- // 4. mutations, 常用于设置 state 数据
- mutations:{
- setIsPhone(state,type){
- state.isPhone=type
- console.log(state.isPhone);
- }
- }
- });
- export default store;
这份代码里掺杂了例子, 使用方法会以举例子的方式来告诉大家. 这里的需求是通过函数判断屏幕大于是否小于 750, 如果小于, 则 isPhone 为 true,div 显示, 反之, 则为 false,div 不显示
三, 全局引用
将 store.JS 引入到 main.JS 里
- import store from './store/store'
- new Vue({
- el: '#app',
- store, // 把 store 对象提供给 "store" 选项, 这可以把 store 的实例注入所有的子组件
- components: { App },
- template: '<App/>'
- })
四, 如何在页面里使用
查
- computed:{
- // 每当 this.$store.state.isPhone 变化的时候, 都会重新求取计算属性, 并且触发更新相关联的 DOM.
- isPhone:function () {
- return this.$store.state.isPhone
- }
- },
- <div v-if="isPhone"></div>
改
在组件中这样使用
- import store from '../store/store'
- methods: {
- resize:function () {
- Windows.innerWidth<=750? this.isPhone=true:this.isPhone=false;
- store.commit('setIsPhone',this.isPhone)
- }
- }
store.commit 的第一个参数, 你要触发 mutations 里的函数的函数名, 第二个参数, 你想要传递的数据
END
ps: 如果项目的数据非常庞大的话, 目录结构请参考官网说明
最后放上官方的图例:
来源: http://www.jianshu.com/p/411c83bc3bee