vuex入门

2017-08-21  本文已影响0人  littleStar_up

npm install vuex--save 安装(install 后package.json里的dependencies中会有vuex)

在src文件下添加xuex文件,内添加actions.js,getter.js,store.js

store.js中引入

import Vue from 'vue'

import Vuex from 'vuex'

import * as actions from './actions'

import * as getters from './getters'

Vue.use(Vuex)

// 应用初始状态

const state = {

count: 10

}

// 定义所需的 mutations

const mutations = {

ADD(val){

state.count++;

}

}

export default new Vuex.Store({

actions,

getters,

state,

mutations

})

actions.js中添加

export const add = ({commit}) => {

commit('ADD')

}

getter.js中添加

export const getCount = state => {

return state.count;

}

main.js中添加

import vuex from 'vuex'     //引用的模块不用加"./"

import store from './vuex/store'

new Vue({ 

 el: '#app', 

 router,

  store

 template: '', 

 components: { App }

})

接下来就可以使用啦

this.$store.dispatch("add");

this.$store.commit('add')

this.$store.getters.getCount;

在github上写了个超级简单的例子https://github.com/littleStar123/vuex

推荐两个chrome扩展程序

Vue.js devtools 查看vuex的store

Insight.io for Github 查看git文件,可下载单个文件

上一篇 下一篇

猜你喜欢

热点阅读