vuex(vue的组件库)

Vue.use(Vuex)

1.vuex哪些属性？

export default new Vuex.Store({
    state:{全局共享属性 xxx:'123'},  页面获取 {{$store.state.xxx}}
    getters:{针对数据，二次计算 changeStr(state){return state.xxx+'yyy'}},
    mutations:{存放同步方法},
    actions:{存放异步方法，并且提交mutations},
    modules:{把vuex进行模块之间划分}
})

2.vuex的state的获取（两种方式）

1）{{$store.state.xxx}}

2)使用辅助函数:mapState

import { mapState } from 'vuex'
 export default{  
    computed:{ 
     ...mapState(['str'])//this.str 
    }  
}

区别：第一种可以直接修改vuex中state的值，第二种不行

3.vuex的getters的获取（两种方式）

1）$store.getters.changeStr

2)使用辅助函数:mapGetters

import { mapGetters } from 'vuex'
 export default{     
    computed:{  
        ...mapGetters(['changeStr']) 
        //this.changeStr   
     } 
 }

没有区别，都不可以改 v-model会报错

4.vuex的modules的使用

user.js ->

export default{ state:{ token:'dfddff' } }
import user from '../modules/user'
modules:{user}

子页面

export default{  
computed:{
  ...mapState({
  token:state => state.user.token
         })
     }
}

5.vuex的mutations 与 actions的区别

mutations mutations:{
 add( state ){ 
state.number+=2
 } 
},

import { mapMutations } from 'vuex
export default{
     methods:{
     ...mapMutations(['add'])
     }
 }
 // {{ $store.state.number }}


actions actions:{
 addNumber({commit},state){ 
    state.number+=2
     } 
}

import { mapActions } from 'vuex
export default{ 
    methods:{
         ...mapActions(['addNumber'])
     }
 }
 // {{ $store.state.number }}

mutations 与 action 存放全局方法的，这个全局方法return的值拿不到

区别：

1）mutations 同步的；actions 返回是Promise对象，他可以执行相关异步操作

2）mutation用来修改state的值，actions的作用是用来提交mutations

vuex持久化存储

vuex本身不是持久化存储，vuex是一个状态管理仓库（state:全局属性）==》 存放全局属性的地方