vuex的使用方法

vuex

状态管理(vuex) store（集中式的存储管理）
什么时候用： 打算开发中大型应用
集中式数据管理, 一处修改，多处使用
思维流程:
store.js
this.$store.commit('increment') -> mutations this.$store.commit(′increment′)−>mutationsthis.store.dispatch(‘jia’) -> actions
mapActions() ->actions mapGetters() -> getters
员工 小组组长 项目总监 财务 董事长 员工
(view）component - dispatch > action -> mutation -> state <- getter <- component
发送请求 处理 修改状态
业务逻辑 修改state 读取state
异步

1. 什么是状态？

• 用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态
• 官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• 个人理解：Vuex是用来管理组件之间通信的一个插件

2.为什么要用Vuex？

我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只有props选项，但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢？嗯…，方法应该有。抛开怎么实现的问题，试想一下，当做中大型项目时，面对一大堆组件之间的通信，还有一大堆的逻辑代码，会不会很抓狂？？那为何不把组件之间共享的数据给“拎”出来，在一定的规则下管理这些数据呢？ 这就是Vuex的基本思想了。

3. 什么是状态管理？

• 用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态，这种管理的形式我们称之为 状态管理

4. vuex是做什么的？（概念）

• vuex是一个集中式的存储仓库【状态】，类似于 本地存储、数据库，vuex是vue的状态管理工具，它的功能主要是实现多组件间的状态【数据】共享

5. vuex的组成部分

state 状态

state 是一个对象，对象中的每一个key ， 就是一个状态

const state = {
count: 0
}
export default state

action 动作（业务交互）

• action 也是一个对象， 对象中的每一个key的value是方法，方法时用来处理业务逻辑的
• action的作用是用来发送一个动作action
• action 发送的动作action 是一个对象，对象中可以有两个参数 type payload
• actions 中的方法可以有两个参数，分别是 store实例里面的方法、 从视图发送过来的实际参数

第一个参数：
{
commit: ƒ boundCommit(type, payload, options)
dispatch: ƒ boundDispatch(type, payload)
getters: {}
rootGetters: {}
rootState: {__ob__: Observer}
state: {__ob__: Observer}
__proto__: Object
}

第二个参数：
视图传过来的实际参数
actions 和 mutations 要想沟通， 我们通过 commit 来进行沟通， commit 是发送一个动作
actions 方法中的动作可以有两个参数 type payload
type 就是 mutations 中方法的名称

• type 要求是一个常量，理由：常量比较稳定，安全性高
  payload 就是传递给mutations放发的实际参数

//导入常量
// import { INCREMENT } from './type';
import * as type from './type'
const actions = {
increment({ commit }, value) {
// console.log('action 触发了')
let action = {
// type: INCREMENT,
type: type.INCREMENT,
payload: value
}
commit(action)
}
}
export default actions

mutation 修改state

1. mutations 也是一个对象
2. mutations 是用来修改数据的
3. mutaions 中存储的也是方法
4. mutaions中的方法名称我们可以用常量表示
5. mutaions 中的方法 可以有连个参数 ， 分别是： state, action

• state 就是 store中的state
• action就是actions中方法发送过来的action

import * as type from './type'
const mutations = {
[type.INCREMENT] ( state,action ) {
// console.log('mutaions',a)
// console.log('mutaions',b)
// console.log('mutations 出发了')
state.count ++
}
}
export default mutations

getter 获取数据的

• getters 也是一个对象，用来获取状态的
• getters 里面存放的还是方法

const getters = {
}
export default getters

store state的存储者

new Vuex.Store({}) 表示创建一个Vuex实例，通常情况下，他需要注入到Vue实例里. Store是Vuex的一个核心方法，字面上理解为“仓库”的意思。Vuex Store是响应式的，当Vue组件从store中读取状态（state选项）时，若store中的状态发生更新时，他会及时的响应给其他的组件（类似双向数据绑定） 而且不能直接改变store的状态，改变状态的唯一方法就是，显式地提交更改（mutations选项）

6. 应用场景

• . 相对比较大型的应用（状态较多）

7. 判断你的项目是不是应该使用vuex

• . 当你觉得你的项目不需要vuex的时候，那么就不用
• . 你觉得需要的时候，就直接使用

8. vuex的使用方案有哪些？（state修改前，state修改后）

• . 前标准，后标准
• . 前标准，后非标准 √
• . 前非标准，后标准
• . 前非标准，后非标准

9.如何使用vuex

1、首先用npm包管理工具，安装vuex

//因为这个包在生产环境中也要使用，所以在这里一定要加上 –save
npm install vuex --save

2、然后在main.js当中引入vuex

import vuex from 'vuex'

3、使用vuex

Vue.use(vuex);//使用vuex
//创建一个常量对象
const state={
    isRed:false
}
var store = new vuex.Store({//创建vuex中的store对象
    state
})

4、随后在实例化Vue对象时，加入store对象：

 new Vue({
    el: '#app',
    router,
    store,//使用store
    template: '<App/>',
    components: { App }
})

5、最后再将最初的示例修改为：

<!-------------------------------------父组件--------------------------------->
<template>
    <div>
        {{$store.state.isRed}}
        <children></children>
    </div>
</template>
<script>
    import children from "@/components/children"
    export default {
        components: {
            children
        }
    }
</script>
<!-------------------------------子组件--------------------------------->
<template>
     <div>
         <input type="button" 
                :class="{active:$store.state.isRed}"  
                value="改变"
               @click="$store.state.isRed=!$store.state.isRed">
     </div>
</template>
<script>
    export default {}   
</script>
<style scoped>
    .active{
        background:red;
    }
</style>

到目前为止，这个示例就被简化了很多？前面将代码都写到了main.js中了，为了日后便于维护，更好的管理vuex，最好对vuex进行一些调整。

1、在src文件夹根目录创建vuex文件夹，然后在该文件夹内创建store.js文件。然后在文件内引入vue和vuex。

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

2、然后使用Vuex

Vue.use(Vuex );//使用Vuex 
//创建一个常量对象
const state={
    isRed:false
}
//让外部引用vuex
export default new Vuex.Store({//创建vuex中的store对象
    state
})

3、然后将main.js之前写入的与vuex相关的内容清除掉，引入刚刚创建的store.js文件

import store from '@/vuex/store'

4、在实例化Vue对象时，加入引入的store对象：

 new Vue({
    el: '#app',
    router,
    store,//使用store
    template: '<App/>',
    components: { App }
})

5、npm run dev，正常运行！