vuex

vue - vuex的定义和使用 （自我理解）

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
• Vuex 的规则使用方法更加趋近于react，有规定的数据储存和修改、改变的方法，尽管其它state内数据在各处都能修改，但Vuex有自己的规则
• Vuex官网 有更加详细的介绍 在此我只写简单常用的部分内容，如后需要，另行删增。

store.js

//导入文件
import Vue from 'vue'
// 导入 vuex
import  Vuex from "vuex" 
Vue.use(Vuex) 

// 创建实例仓库  
var  store = new Vuex.Store({
    state:{  
        //相当一vue中的data  
    },
    getters:{  
        //this.$stort.gerrers.*** 相当于vue中的 computed（计算属性）或filters（过滤器） 
    },
    mutations:{ 
        //相当于vue中的methods ，用来控制state中定义的变量，类似于父子之间传值
    },
    actions:{ 
        // actions:行动动作 , 完成复杂的运算方法、处理数据. Action 提交的是 mutation，而不是直接变更state内状态
    },
})

// 把路由对象暴露出去
export default store

index.vue

<script>
 export default {
    created() {
         this.$store.state   // 可以获取 state中的数据，但是Vuex不提倡、也最好不要这样使用
         this.$store.getters // 通过 getters 过滤获取state的数据 
                             // getters只读state数据，不进行修改
         this.$store.commit('名称' , {})   // 触发mutations内的某个函数
         this.$store.dispatch("名称");   //Action （行动动作 ） 完成复杂的运算方法、处理数据
         
    },
}
</script>

store 解析

state

• 储存变量的仓库

1. 类似于vue中的data数据 :

  data() {
    return { };
  }

2. 更加类似于react中的state :

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {    //react 的数据储存仓库
         seconds: 0 
    };
  }
}

1. 在vue中data 中的数据可以在方法中直接通过this直接改变，而在react中想要更改state中的数据必须通过“this.setState({ }) 才能修改”

2. Vuex 中的state 也类似于vue中的data一样，可以随意修改，但是使用规则是你必须通过 mutations 才能修改。

3. vue页面接收state中的数据

   • this.$store.state 可以获取 state中的数据，但是Vuex不提倡、也最好不要这样使用
   • 通过 getters 过滤获取state的数据 this.$store.getters.

getters (获得)

• 相当于vue中的 computed（计算属性） 或 filters（过滤器） 更趋近于computed

// vue
computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

// Vuex
// Getter 接受 state 作为其第一个参数：
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

• Getter 也可以接受其他 getter 作为第二个参数：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length 
  }
}

//第二个参数相当于获取getters内所有值，包括自己 ，但那样会无限循环

1. 获取 getters 即变相获取state中的值

2. vue页面接收getters中的数据

   • this.$store.getters.doneTodosCount
   • getters只读state数据，不进行修改

mutations （突变、变化）

• 用来控制state中定义的变量 ， 和react中的setState({})类似
• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
• 它会接受 state 作为第一个参数
• 用法 this.$store.commit('名称' , {})

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count = state.count + 1
    }
  }
})

1. mutations 和 Action 有点相似
   • 不过mutations 定义为修改state数据的，术业有专攻。
   • mutations 能进行简单的数据处理，主要修改state
   • Action 当数据需要大量处理 ，或者同时修改多个state内数据时，
   • Action 也能修改state中数据，但建议不要这样做
2. commit vue中可以像是事件注册 ， 当触发一个类型为 increment 的 mutation 时，调用此函数：

// vue

 this.$store.commit('increment' , {})

 //mutations接收一个参数 ， 传参可以用对象，或者单个数据  

Action （行动动作 ） 完成复杂的运算方法、处理数据

• Action 提交的是 mutation，而不是直接变更状态。

• actiom常用于进行复杂计算，或者同时修改多数state里的值，即同时调用多个mutations

• 用法 this.$store.dispatch("名称");

• 注册一个简单的 action：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

// Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
// 可以通过 context.state 和 context.getters 来获取 state 和 getters

//同理可以通过解构参数如此调动

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

Module

• 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
• 此处采用官网例子，然本人并未测试
• 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

Vuex 骨架亦可如此

如下：

import Vue from "vue";
import Vuex from "Vuex";
Vue.use(Vuex);
const state = {
    configs: null,
    examEList:[],
    examCList:[],
};
const getters = {
    getRootPath: state => state.configs,
};
const actions = {
    clearItem({ commit }) {
        commit("clearEItem");
        commit("clearCItem");
    }
};
const mutations = { 
    clearEItem(state) {
        state.examEList = []
    }, 
    clearExamCompItem(state) {
        state.examCList = []
    }
};

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