vue2actions，mutations模块最终导出的时候newVuex.Store小写

背景：

vue2.x项目组件的工程数据逐层传输，太麻烦了。如下图： 内层在家时，父组件的数据需要逐层传输。组件加载数据到父组件时，需要逐层返回，增加了页面的负担。因此引入了vuex状态管理来统一分发和部署。提取组件中的状态，放入Vuex统一管理。

这样他们就变成了一级关系：

Vuex其实就是一个套路（学习运行机制就可以了）

官方网站：

网址：

手绘插图：

需要：

获取数据：

1.components（组件）把数据取出来渲染到界面上，改变里面的数据。

2.全局注册后，$state.state直接取数据或者放到map中再取数据。

更改数据：

1.dispath()方法触发actions，调用action改变数据，但是action没有改变的权限，只能向上级报告（mutations），通过commit()提交。并且行动中的行为和变异的行为应该是相同的。

2. 为了防止出错vuex存放全局变量，统一了常量（mutation-types），在使用方法的时候调用对应的常量。

3. 提交动作，由 commit() 触发突变，并更新状态。

数据的单独处理吸气剂：

例如，该州有价格处理。过滤之后，过滤器变成一个单独的函数，封装成getters中的get方法，然后在组件上直接调用$state.getters。

准备：

在 vue 项目中新建一个文件。如下所示：

安装 vuex:cmd

npm install vuex --save

导入使用：store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue use(Vuex);

对外暴露vuex并引入对应文件：store/index.js

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

import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import state from './state';
Vue.use(Vuex);
export default new Vuex.Store({

state,
mutations,
getters,
actions
})

这里Store的s要大写

否则会报错：TypeError: WEBPACK_IMPORTED_MODULE_1_vuex.a.store is not a constructor

这个错误是 _vuex2.default.store 不是构造函数vuex存放全局变量，因为当我们使用 vuex 时，我们需要导出我们将使用的动作和突变模块。导出时，新的 Vuex.Store 中的 Store 是小写的。,这里一定要大写，相当于我们使用构造函数（类）的时候首字母大写

全局使用 vuex

全局注册：main.js

import store from './store';
/* eslint-disable no-new */
new Vue({

el: '#app',
store, //挂载
render: h => h(App)
// components: {
 App },
// template: ''
});

**实际应用：**现在有一条数据不属于任何组件。Vuex 管理状态。谁要数据，谁就直接在第一层取，不需要组件的层级传递。Vuex 实现了数据的加法功能。

数据存储（任何类型）：store/state.js

// 存放所有的状态,唯一的数据源
export default {


todos: [
{
title:'坐下来好好聊聊天', finished: false},
{
title:'和你一起的旅游', finished: false},
{
title:'回家熬夜敲代码', finished: true},
]
}

应用程序.vue：

<template>
<div class="">
</div>
</template>
<script>
import Header from './components/xxx/xxx'
export default {

name: "App",
data(){

return {

//store/state.js
}
},
components:{

xxx
},
methods:{


// 插入一条记录
addTodo(todo){

this.todos.unshift(todo);
},
//清空所有
delFinishedTodos(){

//filter方法
this.todos = this.todos.filter(todo => !todo.finished)
}
}
}
</script>
<style scoped>
</style>

组件/xxx.vue：

<template>
<div>
<input type="text"
placeholder="请输入今天的任务清单，按回车键确认"
v-model="title"
@keyup.enter="addItem" />
</div>
</template>
<script>
export default{

name:"xxx",
props:{

addTodo:Function
},

data(){

return{

title:''
}
},
methods:{

addItem(){

//判断是否合理
const title = this.title.trim(); //清空所有的输入空格
if(!title){

alert('请输入内容不能为空');
return;
}
//生成todo对象
const todo = {
title,finshed: false};
//调用方法
// this.addTodo(todo);
this.$store.dispatch('addTodo',todo);
//清空输入
this.title = ''
}
}
}
</script>
<style scoped>
</style>

组件调用数据的方法：components/xxx.vue

this.$store.dispatch('addTodo',todo);

实现方式：store/actions.js

action调用mutations的方法必须保证两者的函数名相同，并且需要第三方来保证：mutation-types是暴露的。

存储/突变-types.js：

// 存放一些常量
export const ADD_TODO = 'add_todo';//添加一条记录

存储/突变.js：

// 存放一些常量
import {

ADD_TODO
} from './mutations-types'
export default{

//转字符串为变量，更新数据。
[ADD_TODO](state, {
todo}){

state.todos.unshift(todo);
}
}

查看数据状态：

谷歌浏览器：需要安装 devtools 插件

%20 开发工具

更新数据：

在输入框中输入数据进行添加：

vuex和localstorage存储数据有什么区别完全是两件事，vuex是vue中的一种状态管理机制，方便组件之间的通信；而localstorage是本地存储，是浏览器中存储数据的一种方式，通常在跨页面传递数据时使用。它们是两种完全不同的东西。Vuex用于状态管理，是一种组件数据共享。一个组件的数据更改将映射到使用该数据的其他组件。说到localstorage，就是H5提供的一种比较简单的数据存储方式。之前是存储在cookies中，但是cookies存储的数据量太少，界面繁琐。localstorage的数据可以有5M的限制，相当大，并且该api非常简单易记且易于使用。我相信它会成为未来的主流。Vuex存储状态，代表视图对应的数据，存储位置在内存中；localstorage 是浏览器提供的一个接口，可以让你在电脑上存储文件和磁盘，当然你也可以在本地存储状态！localStorage 是持久化存储，可以跨多个页面共享

localStorage不能很好的和Vue结合，修改后不会触发View的响应式变化

没有localStorage修改的记录，不利于调试和回溯xsf——1991已经说到位了。我再补充一点，如果你的 dispatch 触发了当前路由中没有写入的 vuex 并刷新了页面，那么之前存储在 vuex 中的数据就会被初始化。，vuex中的数据会丢失。总结：

刚开始学习vuex有点迷茫，但是知道了它的运行机制，并且应用到了例子中。