关于vue.js:Vuex使用流程

一、应用 Vuex 的目标

• 实现多组件状态治理。多个组件之间须要数据共享时，Vuex 是个很好的帮手哦

二、Vuex 的五大外围

• 其中 state 和 mutation 是必须的，其余可依据需要来加

1.state

负责状态治理，相似于 vue 中的 data，用于初始化数据

2.mutation

专用于批改 state 中的数据，通过 commit 触发

3.action

能够解决异步，通过 dispatch 触发，不能间接批改 state，首先在组件中通过 dispatch 触发 action，而后在 action 函数外部 commit 触发 mutation，通过 mutation 批改 state 状态值

4.getter

Vuex 中的计算属性，相当于 vue 中的 computed, 依赖于 state 状态值，状态值一旦扭转，getter 会从新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要应用 getter

5.module

模块化治理

三、Vuex 怎么用

1. 首先当然要装置啦 (假如你曾经装置了 vue)

npm install vuex 

2. 引入并应用 Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3. 实例化一个 Vuex 对象 –Store 状态机 并抛出

const store = new Vuex.Store({})

export defaul store 

4. 在 main.js 中引入并注入 Vuex

import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({render: h => h(App),
  store
}).$mount('#app') 

5. 通过 this.$store 拜访 Vuex 的数据

• 到此，Vuex 已筹备实现，接下来就依据本人须要退出数据吧~

四、示例代码

1. 首先筹备至多两个组件，不然怎么数据共享呢

<template>
  <div>
    我是组件 1
  </div>
</template>

<script> export default { } </script>
<style scoped>
</style> 

<template>
  <div>
    我是组件 2
  </div>
</template>

<script> export default { } </script>
<style scoped>
</style> 

2. 在 store.js 中写 Vuex 相干代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({state: {},       // 状态治理
    mutations: {},   // 批改 state
    actions: {},    // 异步操作
    getters:{},     // 计算属性
    modules: {}     // 模块})
export default store 

注：别忘了在 main.js 里注入 store 呀（参考下面第三大点的第 4 小点）

3. 假如咱们当初须要共享一个数据 data, 初始值为 0

···
const store = new Vuex.Store({
    state: {data:0}       
})
··· 

4. 组件 1 和组件 2 都能够通过 $store 拿到 data

 <div>
    我是组件 1
    {{this.$store.state.data}}  // 浏览器中此处会显示 data 的值
 </div> 

 <div>
    我是组件 2
    {{this.$store.state.data}}  // 浏览器中此处会显示 data 的值
 </div> 

5. 那么怎么批改 data 呢，这时候就须要 mutation 出马了

• mutation 本质是一个函数，接管 state 和调用时传来的 params 参数

mutations: {changeDataMut(state,params){state.data = params}
} 

6.mutation 有了，接下来就须要在组件中调用它, 记得要用 commit 触发

<template>
  <div>
    我是组件 1
    <button @click='changeData'> 改数据 </button>
  </div>
</template>
<script> export default {data(){
       return {changeData(){
           // 通过 commit 触发 mutation 并传参
               this.$store.commit('changeDataMut',10)  // 此时组件 1 和组件 2 中 data 都是 10 啦
           }
       }
   }
} </script> 

7.action 怎么用？

• action 也是函数。
• 后面曾经说到，action 不能间接批改 state，首先要在组件中通过 dispatch 触发 action，而后在 action 函数外部 commit 触发 mutation，通过 mutation 批改 state 状态值。
• 留神 action 的参数

actions: {changeDataAct(context,params){  //context 是一个对象，从它外面把咱们须要的 commit 办法解构进去
        let {commit} = context
        commit('changeDataMut',params)
    }
}

这时候能够在组件中触发 action 了，留神应用 dispatch

<template>
  <div>
    我是组件 2
    <button @click='changeData'> 改数据 </button>
  </div>
</template>
<script> export default {data(){
       return {changeData(){
                // 通过 dispatch 触发 action 并传参
                this.$store.dispatch('changeDataAct',100)// 此时 data 就变成 100 啦，并且组件 1 和组件 2 是同步的
           }
       }
   }
} </script> 

8.getter 的用法

• getter 计算属性 , 依赖于 state 值，须要 return
• 当初咱们假如一个值 double，它是 data 的两倍，并且会随着 data 产生扭转

getters:{doubleGet(state){return state.data*2}
} 

• 咱们能够在组件中应用它了

<div>
    我是组件 2
    {{this.$store.getters.doubleGet}}
</div>