Vue中UI组件库之Vuex与虚拟服务器初识

action 要通过 store.dispatch() 方法触发

注意：涉及到异步Ajax请求数据，案例必须运行在服务器端（127.0.0.1）

新建一个data文件夹，创建txt文件。使用ajax 异步读取文本文件中数据：

App.vue父组件：

<script>
 export default {
 methods:{
  add(){
  this.$store.dispatch("JIA");
  }
 }
 }
</script>

main.js

const store = new Vuex.Store({
 state : {
 a : 100
 },
 mutations : {
 JIA(state,payload){
  console.log("只有commit命令能触发我")
  state.a += payload.n
 }
 },
 actions : {
 async JIA({commit}){
  // console.log("只有dispatch命令能触发我，这里可以写异步语句")
  var data = await fetch('../data/1.txt').then(data=>data.json())
  //action提交的是mutation，而不是直接更改状态，
  //请求成功返回的数据需要通过commit命令mutations去修改state中的数据
　　　　　　　// context.commit("JIA", {n: data})
  // this.commit("JIA", {n: data})
  commit("JIA", {n:data})
 }
 },
 plugins: [createLogger()]})

actions中的函数，天生自带默认参数

一些概念：

action 函数接受一个与store实例具有相同方法和属性context对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

实践中，会经常用到ES2015的 参数解构 来简化代码（特别是我们需要调用commit很多次的时候）：

actions:{
 async JIA({commit}){
 var data = await fetch("../data/1.txt").then(data=>data.json());
 commit("JIA",data)
 }
},

action 通过 store.dispatch() 方法触发：

methods:{
 add(){
 this.$store.dispatch("JIA")
 }
}

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

actions支持同样的载荷方式和对象方式进行分发：

vuex单向数据流动的图示：

使用 Vuex 并不意味着你需要将所有的状态放入Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。