标签：actions cli rom commit 目的 class get ati console
每一个vuex应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
安装
1 在vue之后引入vuex
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
2.npm
npm install vuex -S
在vue-cli中，写入以下
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
通过new Vuex.store 来创建一个store
const store = new Vuex.Store({
})store里面有5个对象
一、state ：就是数据仓库；也是我们仓库存放数据的地方
二、mutations：修改仓库的数据，只能通过 commit 来向上传递
我们组件如果想修改数据，正确的操作流程
1. 查看是同步还是异步，是同步则，跳过 actions，直接从 mutations 中修改 state 的数据，这样 state 仓库的数据修改了之后，我们才能正确的响应到组件上
所以，组件仅仅把事件提交给 mutations 就好了， 让 vuex 的 mutations 的方法执行，
使用的方法，配合使用
组件vue 中想修改 vuex 中 state （仓库）中的数据
this.$store.commit("jia",5)
vuex 中实例对象中 将 jia 方法的处理
mutations:{
jia(state,n){ // state 就是仓库，也是我们修改数据的东西， n 就是第二个参数，代表5
console.log(state);
console.log(n);
}
}
第二种写法：
this.$store.commit({
type:"jia", // type 决定了提交的事件名
cont:n // 这个就是我们组件向 vuex 中提交的数据
})
mutations:{
jia(state,n){
console.log(state); // 就是我们的 vuex 的仓库
console.log(n); // n 就是提交的对象
}
}
三、actions：如果我们涉及到异步的提交数据，那就只能从 actions 开始，到 mutations 然后才能修改 state 中的数据，最后渲染到 vue 的组件上
如果我们不这样操作，虽然我们的数据因响应式的也可以正常的渲染页面，但是我们的 vuex 的仓库 state ，却不能正常的显示
操作步骤：
vue 的组件上，我们的提交方式
this.$store.dispatch(‘jia‘,5)；
// 对我们 vuex 的实例上的建立一个仓库，放一个数据
state:{
cont:0
}
然后我们可以在 vuex 的实例上对异步的处理，在 actions 上
actions:{
jia(store,n){
console.log(store) // 就是，vuex 的实例
console.log(n) // 就是我们传输的数据
// 在这里我们进行异步处理
setTimeout(()=>{
store.commit(‘jia‘,n) // 我们异步处理完了，然后我们提交到 mutations 上来对 仓库上的 state 来进行修改
},2000)
}
}
mutations:{
jia(state,n){
state.cont++
}
}
我们还有对象的第二种写法，与 mutations 提交的对象写法一致
四、getters:{
doublecount(){
return conts+10;
} // 返回值就是 doublecount 的 return 值
}
五、moudel 模块，
思想：就是将我们写在一起的东西，分开，比如 state 仓库的数据，我们可以使用 es6 的模块化开发，来引入别的模块的数据，先达到文件分离的目的
我们还可以使用 module 对象，来使我们的仓库分离，只是 state 仓库中的数据不一样，但别的东西都一样
标签：actions cli rom commit 目的 class get ati console
原文地址：https://www.cnblogs.com/yangzhiqiang/p/11385294.html
