Vue cli中Vuex的使用

vuex全局状态管理

• 多组件之间共享状态（多组件之间共享数据）
• 单向数据流，组件内部只能使用，不能修改
• 当全局状态发生改变，所有使用此状态的组件都改变

vuex和localStorage的区别？

1. vuex存储的数据在内存中
   localStorage的数据以文件形式存储在本地
2. 当我们刷新页面时
   vuex的数据将会丢失
   localStorage的数据不会丢失
3. vuex用于多组件之间共享数据
   localStorage用于多页面之间共享数据

但是！！
vuex为数据响应式！！ 数据变 -> 视图变（dom更新）
当一个组件触发全局状态改变时，其他组件也跟着改变！！

如何来使用vuex？

1. 安装vuex
2. 创建一个全局状态仓库
3. 引入Vue Vuex模块
4. 使用Vue.use(Vuex)
5. 创建状态仓库对象
6. 导出仓库对象
7. 在main.js中引入并在vue实例注册store
8. 配置设置。。。。
9. 在组件中如何使用

state

• 全局的状态（数据）
• 单向数据流，组件中只能使用，不能修改
• 在组件中访问state：this.$store.state.xxx 可以获取数据
• this.$store.state.xxx = yyy 不推荐，devtools没有修改记录

let store = new Vuex.Store({
  state: {
    name: '张三',
    age: 25,
    sex: '男',
    imgList: [],
    money: 3000,
    msg: 123
  },

mutations

• 提供了修改state的方法(直接修改)
• 只能在 mutations 中去修改state
• 管理同步操作
• 在组件中使用this.$store.commit(mutations中的方法，数据)修改state

mutations: {
    // 第一个参数：默认传入store对象的state
    // 第二个参数：组件中commit传入的第二个参数
    changeStateSex (state,data) {
      // console.log(state,data);
      state.sex = data // 修改state中的数据
    },
    changeStateName (state,data) {
      // console.log(state,data);
      state.name = data // 修改state中的数据
    },
  }

actions

• 提供了修改state的方法
• 调用mutations中的方法来修改state(间接修改)
• 管理异步操作
• 在组件中使用this.$store.dispatch(actions中的方法，数据)
• actions中的方法再调用store.commit(mutations中的方法，数据)修改state

actions: {
    // 第一个参数：默认传入全局store对象
    // 第二个参数：changeName被触发时传入的数据
    changeName (store,data) {
      store.commit('changeStateName',data)
      // store.state.name = data// 不推荐自己修改，devtools没有记录
    },
    getImgData (store,data) {
      // 在 mutations中执行异步任务，可以拿到数据，
      // 但是，在调试工具dentools中没有记录，不推荐
      let url = '/hehe/xhr/index.json?__timestamp=1599464168069'
      axios.get(url)
      .then((res)=>{
        store.state.imgList = res.data.data.data.focusList
        // store.commit('setImgList',res.data.data.data.focusList)
      })
    }
  },

getters

• 全局的计算属性，类似组件中的计算属性
• 用于计算返回一个值，所有组件都可以使用
• 根据 state和其他的getter进行计算

 getters: {
    // 全局的计算属性，当成属性使用
    // 在组件是使用：this.$store.getters.rmb
    rmb (state,getter) {
      return state.money + '￥'
    },
    add () {
      return 3+6
    }
  },

modules

• 划分模块
• 避免store对象过于庞大，不方便使用和维护

modules: {
    home: {
      // 添加命名空间，作用是区分当前模块和其他模块
      namespaced: true,
      state: {
        msg: 'hello world'
      },
      mutations: {
        setMsg (state,data) {
          state.msg = data
        }
      },
      actions: {},
      getters: {},
      modules: {}
    },
    mine: {
      // 添加命名空间
      // namespaced: true,
      state: {},
      mutations: {},
      actions: {},
      getters: {},
      modules: {}
    }
  }

namespaced: true

• 添加命名空间
• 未添加命名空之前：this.$store.commit(‘setMsg’,‘123’) 访问全局的mutations方法setMsg
• 添加命名空之后：this.$store.commit(‘home/setMsg’,‘123’) 访问的是home模块中的mutations的setMsg