VUEX基础用法,持续更新

vuex是什么? 

在我们使用vue.js进行实际开发的时候,组件之间的相互传值让我们头痛不已,那么有什么办法可以简单直接的让所有组件之间可以相互传值相互使用同一个参数呢? 那么就是vuex了.

就相当于 每个DOM都有一个共同的顶级对象window vuex就相当于vue所有组件共同的数据仓库

vuex可以通过把组件的内容存储到store（一个容器对象） 对象中的数据可以供所有组件使用

那么vuex该如何使用呢?

1 下载vuex 

npm install vuex -S

2  创建store.js 数据仓库

01: 引用vuex

import Vue from 'vue'
import Vuex from 'vuex'

02:挂载vuex 

Vue.use(Vuex)

03 新建一个vuex的对象

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

​

04 在入口文件中引入store这个存储对象

// app.js
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(Counter)
})

3 解释store

  在上面的代码中 我们完成了使用vuex的基础流程, 在其中的一个步骤中,我们使用const定义了四个方法,并装入Vuex.Store对象中,那么,这四个方法到底有什么用呢？

首先我们要理解 store 是用来装数据的, 既然装, 就可以用, 这四个方法就是来使用这些数据的.

state是一个对象 里面保存是我们需要存储操作的数据 通过组件获取state 就可以共同维护同样的数据 

mutations修改state的值 mutations也是个对象 里面放的是一些函数  函数专门用来操作修改state里的数据 只有通过mutations才可以修改state里面的数据  

actions也是保存对的函数 这个函数里面保存的是 commit 触发告诉mutations去执行函数 然后就可以更改页面的数据 

未完待续 持续整理 ..