vuex是vue中用于管理全局状态的一个组件,用于不同组件之间的通信,下面将介绍它的简单用法

首先安装vue与vuex

npm install vue
npm install vuex --save

然后创建一个单独的文件store.vue用来对vuex的处理和使用

import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)

vuex有以下几种选项

  • state: Vuex store 实例的根 state 对象
  • mutations: 在 store 上注册 mutation,处理函数总是接受 state 作为第一个参数(如果定义在模块中,则为模块的局部状态),payload 作为第二个参数(可选)。
  • actions: 在 store 上注册 action。处理函数总是接受 context 作为第一个参数,payload 作为第二个参数(可选)。
  • getters: Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
  • modules: 包含了子模块的对象,会被合并到 store。
  • plugins: 一个数组,包含应用在 store 上的插件方法。
  • strict: 使 Vuex store 进入严格模式,在严格模式下,任何 mutation 处理函数以外修改 Vuex state 都会抛出错误。
 
我们今天只用到state,mutations,actions,getters
const state = {
token: '' // 定义state的初始值,组建中我们可以用$store.state.token来调用
}
const mutations = {
  setToken (state, token) {
    state.token = token || ''
  }
}

我们可以用$store.commit('setToken', 'xxxxxx')来改变state中token的值

const actions = {
  setToken (context) {//这里的context和我们使用的$store拥有相同的对象和方法
    context.commit('setToken');
    //你还可以在这里触发其他的mutations方法
  },
}

可以使用 $store.dispatch('setToken') 来触发 action 中的 setToken方法。actions里面可以执行异步操作。

getters: {
doneTodos: (state, getters) => {
return state.todos.filter(todo => todo.done)
}
}

getters类似于vue的计算属性,它的作用是用来派生一些新的状态,比如我们要把state状态的数据进行一次映射后者筛选,并把这个状态返回给组件使用。

最后将生成的实例导进main.js

export default new Vuex.Store({
state,
mutations,
actions,
getters
})

main.js

import store from './store'
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})

这样vuex的功能已经可以用了,如果业务需要,可以慢慢将它们的选项都完善进去

简易的vuex用法的更多相关文章

  1. [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解

    在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数 ...

  2. 对某项目中Vuex用法的分析

    上周五刚发布一个线上版本,趁着新的需求和bug还没到来,决定分析一下正在维护的一个使用Vue 2.0 开发的后台管理系统中Vuex部分代码.这部分代码不是我写的,加上我一直在“使用”现成的而不是“搭建 ...

  3. vuex用法

    // 配置vuex的步骤 // 1. 运行 cnpm i vuex -S // 2. 导入包 import Vuex from 'vuex' // 3. 注册vuex到vue中 Vue.use(Vue ...

  4. Vuex 常规用法

    背景 很多时候我们已经熟悉了框架的运用,但是有时候就是忘了怎么用 所以这里想记下大部分的框架使用方法,方便使用的时候拷贝 一.安装 npm 方式 npm install vuex --save yar ...

  5. [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...

  6. vue的Vuex

    网上也很多文章,但解释起来的确玄乎,小白们很难理解到位. 自问文笔没大神们好只是自己了解了掌握了Vuex用法以及主要思路 但要我解释起来也只能参考大神们的说法 Vuex就是一个全局变量,而这个全局变量 ...

  7. [js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取博客所有的文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的h ...

  8. Vue(七)整合vue-router&Vuex&Axios

    整合vue-router&Vuex 先创建工程 vue create vue-axios 然后选择 勾选 回车,出现是否使用history mode?选择y,代表URL地址里面不会出现#.选择 ...

  9. vuex 快速上手,具体使用方法总结(含使用例子)

    网上有关vuex的文章很多,但有些比较复杂,这篇文章能让你快速使用vuex: vuex 用处:管理全局状态(类似全局变量,每个组件都能访问到) vuex 用法: //下面是一个js文件,用最简单最全的 ...

随机推荐

  1. Javascript:各种宽高

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  2. SharePoint - CAML

    1. CAML是顺序操作,如果要实现类似 “A or B or C or D” 的结果,最好写成 “(((A or B) or C) or D)”的形式,但写成 “((A or B) or (C or ...

  3. 【Linux】小应用 大智慧

    小应用 大智慧--重视 以工程师的标准要求自己

  4. Siebel Tools 开发笔记

    1.在Siebel Client上的菜单Help -> View 中可以找到开发所常用的信息 Screen:   此画面所使用的Screen名字在Tools的Object Explorer中的[ ...

  5. JSP实现用户登录样例

    业务描述 用户在login.jsp页面输入用户名密码登录: 如果用户名为xingoo,密码为123,则跳转到成功界面login_success.jsp,并显示用户登录的名字: 如果用户名密码错误,则跳 ...

  6. windows网络模型之完成端口(CompletionPort)详解 (转)

    转载自:https://blog.csdn.net/piggyxp/article/details/6922277 目录: 1. 完成端口的优点 2. 完成端口程序的运行演示 3. 完成端口的相关概念 ...

  7. 编程思想的理解(POP,OOP,SOA,AOP) x

    http://blog.chinaunix.net/uid-29417436-id-4060980.html 1)POP--面向过程编程(Process-oriented programming ): ...

  8. BAT的云

    近期,关于用国内那家云非常纠结! 我也来说道说道各家云. 首先,说说我想要的云服务(按优先级): 0.最好能提供二级域名.移动互联网时代,顶级域名必需要吗?在手机浏览器上输入长长的域名非常蛋痛(即不要 ...

  9. 【BZOJ4766】文艺计算姬(prufer序列)

    点此看题面 大致题意: 让你求一个两边各有\(n\)和\(m\)个点的完全二分图有多少个生成树. \(prufer\)序列 这是一道比较经典的利用\(prufer\)序列结论求解答案的计数题. 大致思 ...

  10. Wannafly挑战赛1,2

    做了好久了,今天大佬讲题,好厉害,弱鸡只会几道水题. Treepath 给定一棵n个点的树,问其中有多少条长度为偶数的路径.路径的长度为经过的边的条数.x到y与y到x被视为同一条路径.路径的起点与终点 ...