Vuex使用记录

最近在项目上使用Vuex，从陌生到熟悉，整理一下使用思路和方法，加深印象。官方文档：https://vuex.vuejs.org/zh/。

  先明确几个概念：

一，分文件使用

     1.State:数据源 。访问： 

this.$store.state.xxxx

     2.Getter:vuex的计算属性。类似于computed里面的操作函数。如果要在多个组件使用，提取到getter中，就会十分方便。在组件中使用：(getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果)

this.$store.getters.getTodoById(2)//方法
this.$store.getters.getTodoById//通过属性使用，会缓存

export default{
  doneTodos: state => {
      return state.todos.filter(todo => todo.done)
  }
}

     3.Mutation：对State的操作全部在这里进行。在严格模式下，不通过Mutation直接对State进行操作将会报错，而且使用Mutation能够记录数据变更得过程。mutation必须同步执行。使用：

this.$store.commit('increment')//触发mutation

export default {
    increment (state) {
      // 变更状态
      state.count++
    }
}

 

     4.Action:Action 类似于 mutation。1，Action 提交的是 mutation，而不是直接变更状态。这个怎么解释呢，就是Action里面做的操作时去调用mutation，这一步看起来有点多余，但是它的真正的用途是第二点：Action 可以包含任意异步操作。使用：

this.$store.dispatch('increment')//触发ACTION

export default {
    increment (context) {
      context.commit('increment')
    }
}

  从0开始： vue-cli =》安装vuex =》新建vuex文件 =》注册，配置vuex的index.js =》挂载到vue实例上。

如果项目比较大，可以将state、mutation、action分开文件单独保存。

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

// 引入actions, mutations, getters
import actions from "./actions.js"
import mutations from "./mutations.js"
import getters from "./getters.js"

//数据源
const state = {
    count:0,
    // 新增waiting  状态
    todos: [],
}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

挂载在Vue上，在Vue的main.js文件中

import vueOption from '@/store'

function newVue () {
  const VueObject=new Vue(vueOption).$mount('#app-box');
  Vue.prototype.$vue=VueObject;
}

newVue()

 

二、分模块使用

 在store文件下新建一个模块专属的vuex文件

这里是新建了两个模块的专属vuex仓库。

 其中login里面

export default {
  state:{//数据源
    taskdata:[],
    count:0
  },
  getters:{//这里面写方法
    getTaskDatas(state){
      return state.taskdata
    },
  },
  mutations:{//这里面写方法
    increment (state) {
      // 变更状态
      state.count++
    }
  },
  actions:{
   increment (context) {
      context.commit('increment')
    }
  }
}

store文件的index.js

import Vuex from 'vuex';
import Login from './modules/login';
import ConfirmData from './modules/confirmdata';

Vue.use(Vuex)
const store = new Vuex.Store({
  // strict:true,    
  modules:    
   {
    login:Login,
    confirmdata:ConfirmData
   } 
  })
export default store

然后和方案一 一样挂载在vue实例上。

分模块后的用法除了数据源因为被分割了局部空间，在调用的时候要加上模块名：this.$store.state.login.xxx。getters\mutations\actions的依然被注册在全局，用法和方案一样。

有几个很重要的原则必须清晰：

1. 应用层级的状态应该集中到单个 store 对象中。

2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。不能用类似this.$store.state.count = 2 这样的代码直接去修改仓库的数据源

3. 异步逻辑都应该封装到 action 里面。