vuex属性介绍

VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

一，state    负责状态管理，类似于vue中的data，初始化数据

二，mutation  专用于修改state中的数据，通过commit触发

三，action  可以处理异步，通过dispatch触发，不能直接修改state，首先在组件中通过dispatch触 发action， 然后在action函数内部commit触发mutation，通过mutation修改state状态值

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

五，module  模块化管理

使用

安装vuex

1. 1. 使用npm下载：
      npm install vuex --save
   2. 使用vue-cli构建项目时选择使用vuex
   3. 创建store文件夹，目录结构如下：
   4. 
   5. 创建index.js，代码结构如下

      //导入vue及vuex
      import Vue from 'vue'
      import Vuex from 'vuex'
      //挂载vuex
      Vue.use( Vuex)
       //创建vuex对象并向外桑露
      export default new Vuex.Store({ 
        //全局属性变量
      state: { },
      //全局同步方法，调用方法, this.$store.commit( "XXX")
      mutations: { },
      //异步方法调用方法,this . $store.dispatch( "xXX")
      actions: { },
      //Vuex属性计算，在觇图里面当变量使用
      getters: { },
      //模按化注期
      modules : { }
      })
      

      挂载到vue实例中并设置全局调用在入口文件main.js中添加
      1 导入

      import store from "./store/index.js'

       挂载到Vue实例上，全局可透过this.$store进行调用 

      Vue.prototype.$store = store

      示例代码

      首先准备至少两个组件，实现数据共享

   6. template>
        <div>
           我是组件1
      </div>
      </template>
      <script>
      export default {}
      </script>

      在store.js中写vuex相关代码

   7. //导入vue及vuex
      import Vue from 'vue'
      import Vuex from 'vuex'
      //挂载vuex
      Vue.use( Vuex)
       //创建vuex对象并向外桑露
      const store = new Vuex.Store({ 
        //全局属性变量
      state: { },
      //全局同步方法，调用方法, this.$store.commit( "XXX")
      mutations: { },
      //异步方法调用方法,this . $store.dispatch( "xXX")
      actions: { },
      //Vuex属性计算，在觇图里面当变量使用
      getters: { },
      //模按化注期
      modules : { }
      })
      export default store
      

      然后有一个组件2

   8. 
      <template>
        <div>
           我是组件2
      </div>
      </template>
      <script>
      export default {}
      </script>
      

      假设现在需要共享—个数据data,初始值为0
      

   9. 此时组件1和组件2都能拿到data的值

      

       

      如果修改data的值需要mutation    mutation实质是一个函数，接收state和调用时传来的params参数 

   10. import Vue from 'vue'
       import Vuex from 'vuex'
       Vue.use( Vuex)
       const store = new Vuex.Store({ 
         //全局属性变量
       state: { 
         data: 0
       },
       mutations: { 
         changeData(state,params){
           state.data = params
         }
       },
       actions: { },
       getters: { },
       modules : { }
       })
       export default store
       

       现在可以改变了，需要commit触发

   11. <template>
         <div>
            我是组件1
            <button @click="clickBtn"></button>
       </div> 
       </template>
       <script>
       export default {
         methods:{
           clickBtn(){
             this.$store.commit('changeData',10)
           }
         }
       }
       </script>

       7.action怎么用?
       action也是函数。action不能直接修改state，首先要在组件中通过dispatch触发action，然后在action函数内部commit触发mutation，通过mutation修改state状态值。
       注意action的参数

       import Vue from 'vue'
       import Vuex from 'vuex'
       Vue.use( Vuex)
       const store = new Vuex.Store({ 
         //全局属性变量
       state: { 
         data: 0
       },
       mutations: { 
         changeData(state,params){
           state.data = params
         }
       },
       actions: { 
         changeDataAct(context,params){
           let {commit} = context
           commit('changeData', params)
         }
       },
       getters: { },
       modules : { }
       })
       export default store

       actions已经有了，通过dispatch触发

   12. <template>
         <div>
            我是组件2
            <button @click="changeData"></button>
       </div> 
       </template>
       <script>
       export default {
         methods:{
           changeData(){
             this.$store.dispatch('changeDataAct',100)
           }
         }
       }
       </script>

       8.getter的用法
       getter计算属性,依赖于state值，需要return
       现在咱们假设一个值double，它是data的两倍，并且会随着data发生改变
       
        

       import Vue from 'vue'
       import Vuex from 'vuex'
       Vue.use( Vuex)
       const store = new Vuex.Store({ 
         //全局属性变量
       state: { 
         data: 0
       },
       mutations: { 
         changeData(state,params){
           state.data = params
         }
       },
       actions: { 
         changeDataAct(context,params){
           let {commit} = context
           commit('changeData', params)
         }
       },
       getters: {
         doubleGet(state){
           return state.data*2
         }
        },
       modules : { }
       })
       export default store
       

        然后获取getter的值

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