VUEX 的使用学习一

转载请注明出处：

一、Vuex是什么？

　　介绍：Vuex 是一个专为 [Vue](https://so.csdn.net/so/search?q=Vue&spm=1001.2101.3001.7020).js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。他可以方便实现组件之间的数据共享

　　理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。

二、我们什么时候应该用到Vuex呢？

　　a.小应用不建议使用Vuex,因为小项目使用 Vuex 可能会比较繁琐冗余；

　　b.中大型单页应用，因为要考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择；

三、对于使用Vuex的理解是什么？

　　由于Vue是单向数据流，子组件内部不能直接修改从父级传递过来的数据，子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话，可以借助子组件 A 向父组件传值，父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。

　　但是这样会有一个问题，就是如果子组件 A 的父组件上面还有一层爷爷组件，或者还有更多祖父类型的层级，那么是不是会很麻烦。

　　因此，我们会想到能不能我们将一个共有的数据存在一个特定的地方，用的时候自己去拿，这样就不需要一层层传值，于是乎 Vuex 就应运而生了。

　　

四、vuex由五部分组成(五种状态/五种属性)

　　

• state: 数据

• actions:可以包含异步操作

• mutations: 唯一可以修改state数据的场所

• getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）

• modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

　　

五、安装配置

　　第一步：npm i vuex --save/-S

　　第二步： 创建store.js

　　第三步：挂载使用 Vue.use(vuex)

　　第四步：const store = new Vuex.Store({...配置项})

　　第五步：导出 export default store

　　第六步：导入main.js 在根实例配置 store 选项指向 store 实例对象

　　具体操作步骤：

　　安装

npm install vuex

　　创建store.js

import Vue from 'vue'
// 初始化一个vuex的实例（数据仓库） 导出即可
import Vuex from 'vuex'
import axios from 'axios'

// 使用安装
Vue.use(Vuex)

// 初始化,并声明：state，mutations,actions,getters等属性
export default new Vuex.Store({
  state: {
    // 所有的任务列表
    list: [],
    // 文本框的内容
    inputValue: 'aaa',
    // 下一个Id
    nextId: 5,
    viewKey: 'all'
  },
  mutations: {
    // 清除已完成的任务
    cleanDone(state) {
      state.list = state.list.filter(x => x.done === false)
    },
    // 修改视图的关键字
    changeViewKey(state, key) {
      state.viewKey = key
    }
  },
  actions: {
    getList(context) {
      axios.get('/list.json').then(({ data }) => {
        // console.log(data)
        context.commit('initList', data)
      })
    }
  },
  getters: {
    // 统计未完成的任务的条数
    unDoneLength(state) {
      return state.list.filter(x => x.done === false).length
    },
  }
})

　　把store对象挂载到Vue实例中，可以在main.js 中进行绑定

import store from './store.js'
import App from './App.vue'

new Vue({
  render: h => h(App),
  store
}).$mount('#app')