Vuex的实用知识点

vuex的特点

当store容器中的数据发生变化了，那么组件中的数据也会跟着发生变化

更改store中的state值，必须使用commit

vuex安装

npm install vuex -S
Vue.use(Vuex)

vuex基本使用

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

1、全局使用

import user from './user/user.js'
new Vuex.Store({
      state:{},    //管理数据
      getters:{},   //通过state计算出新的属性
      mutations:{},  //操作修改state数据
      actions:{},    //异步操作(ajax)
      modules:{
           user,   //注入
      },   //模块开发
})
访问state数据:$store.state.属性名
访问getters数据：$store.getter.计算属性名
调用mutations方法: $store.commit('方法名',实际参数)
调用actions方法:$store.dispatch('方法名')

2、模块开发

模块开发 store/user/user.js
     var user={
       namespaced:true,   //命名空间
       state:{
            isLog:false,
       },    //管理数据
       getters:{},   //通过state计算出新的属性
       mutations:{
            logout(state){}
       },  //操作修改state数据
       actions:{
            getUserInfo(context){
            }
       },    //异步操作(ajax)
       modules:{},   //模块开发
     }
   export default user;
   
   调用模块属性: $store.state.模块名.属性名
   调用mutations方法:$store.commit('模块名/方法名',参数)
   调用actions方法:$store.dispatch('模块名/方法名')

3、vuex映射

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
       export default{
           computed:{
              //全局
              ...mapState(['属性名','属性名',....])
              ...mapGetters(['属性名','属性名',....])
              //模块
              ...mapState('模块名',['属性名','属性名',....])
              ...mapGetters('模块名',['属性名','属性名',....])
           },
           methods:{
              //全局
               ...mapMutations(['方法名','方法名',....])
               ...mapActions(['方法名','方法名',....])
             //模块
              ...mapMutations('模块名',['方法名','方法名',....])
              ...mapActions('模块名',['方法名','方法名',....])
           }
       }
       调用属性:{{属性名}}
       调用方法: this.方法名(参数)