vuex的简单使用教程

2019-11-19 14:25:43

字体：大中小

来源：转载

供稿：网友

什么是Vuex？

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

使用vuex进行组件间数据的管理

npm i vuex -S

main.js

import Vue from 'vue'import App from './App.vue'import store from './store.js'new Vue({ store, el: '#app', render: h => h(App)})

store.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 这里定义初始值let state = { count:10};const mutations = { add(context){  context.count++ }, decrease(context){  context.count-- }};// 事件触发后的逻辑操作// 参数为事件函数const actions = { add(add){  add.commit('add') }, decrease(decrease){  decrease.commit('decrease') }, oddAdd({commit,state}){  if (state.count % 2 === 0) {   commit('add')  } }};// 返回改变后的数值const getters = { count(context){  return context.count }, getOdd(context) {  return context.count % 2 === 0 ? '偶数' : '奇数' }};export default new Vuex.Store({ state, mutations, actions, getters})

App.vue

<template> <div id="app"> <button @click="add">add</button> <button @click="decrease">decrease</button> <button @click="oddAdd">oddAdd</button> <div>{{count}}</div> <div>{{getOdd}}</div> </div></template><script>import {mapGetters,mapActions} from 'vuex' export default {  // 得到计算后的值  computed:mapGetters(['count','getOdd']),  // 发生点击事件触发不同函数  methods:mapActions(['add','decrease','oddAdd']) }</script>