美文网首页
vuex入门

vuex入门

作者: littleStar_up | 来源:发表于2017-08-21 10:24 被阅读0次

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文件,可下载单个文件

相关文章

  • 后台管理(4)--- vuex的实际使用(vue)

    今天我们来讨论一下在项目中到底应该怎么使用vuex(vuex还没有入门的同学可以先看这个链接vuex 入门及持久化...

  • 轻松上手Vue - 简化Vuex

    PS: Vuex 对于很多初入门Vue的来说,入门困难,感觉非常绕。 Vuex 是一个专为 Vue.js 应用程...

  • vuex入门详解

    vuex最简单、最详细的入门文档 vuex最简单、最详细的入门文档 如果你在使用 vue.js , 那么我想你可能...

  • vuex入门

    vuex最简单、最详细的入门文档

  • 2020-03-25 vuex 全集

    Vuex入门(1)—— Vuex的设计初衷和简单使用 https://blog.csdn.net/dkr38020...

  • vuex入门

    1.入门使用 (1)引入vuex (2)新建src/vuex文件夹,在vuex中新建store.js文件。文件中引...

  • vuex入门

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

  • Vuex 入门

    Vuex 是什么? 官方给出的解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存...

  • vuex入门

    npm install vuex--save 安装(install 后package.json里的dependen...

  • vuex入门

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

网友评论

      本文标题:vuex入门

      本文链接:https://www.haomeiwen.com/subject/rfkcdxtx.html