Skip to content
使用vue+vue-router+vuex+boostrap实现计划表系统
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
config
src
static
.babelrc
.editorconfig
.gitignore
.postcssrc.js
README.md
index.html
package.json

README.md

Vuex-状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。

1.安装vue-cli

安装命令行工具

npm install vue-cli -g

选择模板

  • webpack
  • webpack-simple
  • browserify
  • browserify-simple
  • simple

2.生成项目

vue init <template-name>#版本号 <product-name>

3.安装依赖并启动

$ cd myApp && npm install 
$ npm run dev
$ npm install vuex --save

4.安装调试工具dev-tool

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

5.单向数据流

  • state,驱动应用的数据源;
  • view,以声明方式将state映射到视图;
  • actions,响应在view上的用户输入导致的状态变化。

6.组件共享状态

  • 多个视图依赖于同一状态。
  • 来自不同视图的行为需要变更同一状态。

7.State-状态

单一状态树:用一个对象就包含了全部的应用层级状态。这个对象就是State,整个应用只能包含一个store的实例。

使用vuex创建状态,在App.vue下实现计数功能

<div id="app">
       <!--count应该归state管理-->
       计数器 {{count}}
       <button>增加</button>
</div>

创建store

$ cd src && mkdir store
$ cd store && touch index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
  count:0
};
export const store = new Vuex.Store({
  state
});

在main.js中引入store

import {store} from './store'
new Vue({
  el: '#app',
  router,
  store,
  ...App
});

在页面上展示count

computed:{
    count(){
        return this.$store.state.count;
    }
}

辅助函数mapState可以简化写法

computed:{
    ...mapState([ // 不更改数据名
        'count'
    ])
    ...mapState({ // 更改数据名
      count:'count'
    })
}

8.Mutations-突变

更改Vuex中store的数据,只能通过提交mutation,每个mutation都有一个type和回调函数,回调函数中的参数就是当前store中的state

创建mutations

const INCREMENT = 'increment';
const mutations = {
  [INCREMENT](state,n){
    state.count += n;
  }
};
export const store = new Vuex.Store({
  state,
  mutations
});

更改页面count

<button @click="add">增加</button>
methods:{
    add(){
        this.$store.commit('increment',1);
    }
}

辅助函数`mapMutations可以简化写法

import {mapState,mapMutations} from 'vuex';
methods:{
    add(){
        this.increment(2);
    },
    ...mapMutations([
      'increment'
    ])
}

mutation只能写同步方法,一般是通过action中的commit提交到mutation中,我们一般只需派发action即可

9.Actions

  • Action提交的是mutation,不能直接更改状态
  • Action可以包含异步操作

通过action提交到mutation中

const actions = {
  [INCREMENT]({commit},n){
    commit(INCREMENT,n)
  }
};
export const store = new Vuex.Store({
  state,
  mutations,
  actions
});

直接使用mapActions简化操作

import {mapState,mapMutations,mapActions} from 'vuex';
methods:{
    add(){
        this.increment(1);
    },
    ...mapActions([
        'increment'
    ])
}

10.Getters

Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。Getters 接受 state 作为其第一个参数:

想判断当前count是奇数还是偶数

const getters = {
  computeCount(state){
    return state.count%2==0?'偶数':'奇数'
  }
};
export const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

直接使用mapGetters简化操作

import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';
computed:{
    ...mapGetters([
        'computeCount'
    ])
},

在页面上将变量取出

{{count}}

vue-plain

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.