VUEX学习总结

首先我们看一下官网的描述：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

大概意思就是vuex是一个状态管理工具，它将许多组件共享的状态（变量）集中放在一起进行响应式管理。

 

vuex的安装：

1.npm 安装

npm install vuex --save

2.项目中使用

   *在项目目录中新建文件夹store ,在文件夹下新建index.js文件

--src
 --store
  --index.js

   *在index.js中引入vuex                                   

import Vue from './vue'
import Vuex from './vuex'

Vue.use(Vuex);    

const  store = new Vuex.Store({
       
})
export default store 

   代码片段中的Vue.use()实际上是调用了内部的install()方法来安装插件

 

 *在main.js中进行注册

import store from './store'

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

  这一步的原因其实是将Vue.portotype.$store = store,这样就可以全局使用$store访问或修改状态

3../store/index.js中的使用

  我们先看一张官方图

  

  state:代表状态值（变量值）

  view:代表视图层

  action:代表动作，行为

  三者之间的关系可以理解为:state是在view上显示，我们又可以在view上通过action去改变state,例如点击事件

  vuex包括以下几个部分：

 

  state:为一个对象，用来存放状态。并且状态值要想做到响应式，必须在state中初始化。

  mutation：为一个对象，里面的方法用来对state进行修改。必须使用store.commit来提交修改,一边更好的跟踪每个状态的修改。

  action:用来异步更改state。但他也必须要提交mutation来更改state

  getter:类似computed

  module:当项目足够大，需要管理的状态较多，可以把状态分成几个模块，每个模块都有自己的state,getter,mutation,action

 

  以上五个属性的具体介绍可以在官网查看，还是写的挺清晰的。

 

 需要注意的有一下几点：

  *要想添加一个状态，并做到响应式，可使用Vue.set(对象，属性名，值）/Vue.set(数组，下标，值）

  *要想删除一个状态，并做到响应式，可使用Vue.delete(对象，属性名）/Vue.set(数组，下标）

  *mutation 接受两个参数，一个是state,第二个需要传入的参数arument（若参数为一个值，argument为一个值，若参数为多个值，则argument为一个对象）

 

  *