1.Vuex 介绍

概念: Vuex 是 vue 项目中实现大范围数据共享的技术方案
作用: 能够方便、高效地实现组件之间的数据共享
好处 :

数据的存取一步到位，不需层层传递
数据的流动非常清晰
存储在 Vuex 中的数据都是响应式的

2. Vuex 使用步骤

//1. 下包
npm install vuex 
     
在store文件/index.js 配置
// 2. 导入 Vuex 
import Vuex from 'vuex'   
// 3. 安装 Vuex 插件
Vue.use(Vuex)    
// 4. 创建 store 对象
const store = new Vuex.Store({})   
// 5. 默认导出 store 对象
export default store

//在main.js配置
// 6. 导入 store 对象
import store from './store'	
// 7. 挂载到 Vue 实例上	
new Vue({				
  render: h => h(App),
  store
}).$mount('#app')

3.Vuex 成员介绍

1. State 的基本使用

概念：State 本质上就是 Object 对象
作用：用来存储全局共享的数据
使用:组件访问组件访问 State 数据的方式 (使用辅助函数)

// 1.在 vuex 中定义state
   state: {
       count: 0,
       list: [ ]
     }
     
// 2.在组件中按需导入
   import { mapState} from 'vuex'
   
// 3. 在计算属性中调用 mapState
computed: {
   ...mapState('模块名',['count', 'list']),
 }

2. Mutation 的基本使用

Mutation 本质 : 是 JavaScript 函数
特点：想要修改 State 中的数据，只能调用 Mutation 方法！
好处：能够确保修改来源的唯一性，方便调试和后期维护
作用 : 专门负责修改 State 中的数据
所有 mutation 函数第一个参数都是 state (必须是同步任务 )

// 1. 在 vuex 中定义 mutation 
mutations: {
 addCount (state, payload) {
    console.log(payload)
 }
}
// 2.在组件 methods 中调用 addCount 函数
this.$store.commit('addCount', { num: 1 })

3. Action 的基本使用

本质上是 JavaScript 函数，专门用来处理 Vuex 中的异步操作
不能直接修改数据源
把异步操作的结果，转交给 Mutation，由 Mutation 负责修改数据源

// 1. 在 vuex 中定义 action
actions: {
   // 所有 action 函数第一个参数都是 context 上下文对象 -> 当成 store 对象使用
   
// 2.第二个参数是 payload 载荷传递过来的参数
   addAsync(context, payload) {
     context.commit('addCount', payload)
   }
   
// 1. 在组件中按需导入辅助函数
 import { mapActions} from 'vuex'
 
// 2. 在 methods 中调用 mapActions辅助函数
 methods: {
   ...mapActions('模块名',['addAsync']),
   
   //不使用辅助函数调用
   this.$store.dispatch('模块名/addAsync')
}

4. Getter 的基本使用

本质上是 JavaScript 函数
getters 等于是 Vuex 中的计算属性, 所以可以全局共享使用
作用：它是 Vuex 中的计算属性，当 Store 数据源发生变化时，Getter 的返回值会自动更新。

  // 1.在 vuex 中定义 getters
  // 2.第一个参数永远都是 state
  // 3.必须要返回一个结果
getters: {
    isAll(state) {
      return state.list.every(item => item.isDone)
    }
  }
  
// 1. 在组件中按需导入辅助函数
  import { mapActions} from 'vuex'
  
// 2. 在计算属性中调用 mapGetters
    ...mapGetters(['isAll']),

5.Module 的基本使用

Vuex 中的 Module 表示按照模块化的开发思想，把不同的数据和方法，按照彼此的关联关系进行封装
每个模块都是彼此独立的，都可以拥有自己的 state、mutations、actions、getters 节点

// 1. 在 vuex 中导入子模块
   import count from './count'
   import cart from './cart'
   
// 2. 注册模块
modules: {
   // 属性名就是模块名
   // 属性值就是模块对象
   // count: count
   // 不要和全局 state 中的数据重名
   moduleCount: count,
   moduleCart: cart
 }

4. 总结

mapState: 映射 state 中的数据
mapMutations: 映射 mutations 的函数
mapActions: 映射 actions 的函数
mapGetters: 映射 getters 中的计算属性
所有的辅助函数调用都会返回一个对象, 对象中存放着映射过来的函数

建议:

如果访问 state 中数据建议使用辅助函数, 会更方便
如果是调用 mutation 或 action 的函数, 可以不用使用辅助函数

vuex使用语法(补充) (不分模块)

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        menuList: [ ],
        //持久化用户信息(登录时保存到localStorage)
        userInfo: JSON.parse(localStorage.getItem("userInfo"))  
    },
    mutations:{
        // 保存当前菜单栏
        setMenuList(state, payload){
            state.menuList = menuList;
        },
    }
    
   // 操作异步操作mutation
     actions: {
         setMenuList(context, payload){
           context.commit('setMenuList', payload);
        }
   },

})

保存数据

methods:{
    click(){
        //mutations  点击按钮进行一些操作，然后保存数据
        this.$store.commit('setMenuList',meneData)
        //actions
        this.$store.dispatch('setMenuList', meneData);

    }
}
//这里的第一个参数是要触发的方法，也就是上面mutations中的方法，第二个参数是你要传递的数据

获取数据

//取数据
 let menuList = this.$store.state.menuList;

获取变量：（当数据初始获取不到时，可以使用计算属性用来获取）

watch: {
    DbSource(currVal) {
        // 监听mapState中的变量，当数据变化（有值、值改变等），
        // 保证能拿到完整的数据，不至于存在初始化没有数据的问题，然后可以赋给本组件data中的变量
      this.currVal = currVal;
    }
  }

Vuex–持久化 (分模块用法)

//1.下载插件
npm i vuex-persistedstate

//2.默认存储到localStorage  想要存储到sessionStorage，配置如下
import createPersistedState from "vuex-persistedstate"

import common from './modules/common' //公共模块
import module1 from './modules/module1' //模块一
import module2 from './modules/module2' //模块二
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    common,
    module1,
    module2,
  },
  plugins: [
    // 需要sessionStorage存储起来的模块
    createPersistedState({
      storage: window.sessionStorage,
      paths: ['common', 'module1','module2']
    })
  ],
  state: {
  },
  mutations: {
  },
  actions: {
  },
})

存数据

//同步
this.$store.commit('common/setMenuList',meneData)
//异步
this.$store.dispatch('common/setMenuList',meneData)

common模块

//common模块
const state = {
    menuList: [],    
};
const mutations = {
    setMenuList(state, payload) {
        state.menuList = payload
    },
};
const actions = {
    setMenuList(context, payload){
        context.commit('setMenuList', payload);
     }
};
const getters = {
};
export default {
    namespaced: true,//命名空间
    state,
    mutations,
    actions,
    getters
};

取数据

//取数据
 let menuList = this.$store.state.common.menuList;

学习Vuex看这篇就够了

1.Vuex 介绍

2. Vuex 使用步骤

3.Vuex 成员介绍

4. 总结

vuex使用语法(补充) (不分模块)

保存数据

获取数据

获取变量：（当数据初始获取不到时，可以使用计算属性用来获取）

Vuex–持久化 (分模块用法)

存数据

common模块

取数据