Vuex 全部问题和使用使用

2023-11-21 11:55:46

1.有关 Vuex 方面的问题和方法有一下内容

  • vuex 的概念和作用

  • vuex 的五大核心以及相应概念

  • vuex 的安装

  • vuex 的使用场景

  • Vuex 如何使用

  • Vuex  的运行机制

  • vuex 的数据持久化

  • vuex 的简介方法 --- 映射

  • 还有 vuex 的模块化

1.Vuex 的概念

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  • 说得直白点，vuex就是vue.js中管理数据状态的一个库，通过创建一个集中的数据存储，供程序中所有组件访问。

2.Vuex 五大核心概念

  • 1、state 所有的数据都存储在state中， state是一个对象
  • 2、mutations 可以直接操作state中的数据
  • 3、actions 只能调用mutations的方法
  • 4、getters 类似计算属性实现对state中的数据做一些逻辑性的操作
  • 5、modules 将仓库分模块存储

3.Vuex 的安装

命令：

cnpm install vuex --save

4.vuex 的使用场景

  • 需要构建一个中大型单页应用，您很可能会考虑如何更好的在组件外部管理状态，Vuex将会成为自然而然的选择。
  • 页应用中，组件之间的状态

5.vuex 的使用

  • 在src下面新建store文件夹
  • 在文件夹里面新建一个文件index.js
  • 在store.js中写入 
    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {  
     //存储共享数据的
     msg:"张波跟了我7给月了",
     num:15,
     isshow:true
  },
  mutations: {   
      //只有mutations才能更改state中的数据
      plusOne(state){
         //state是用来读取state中的数据
         state.num++
      },
  },
  actions: {
  },
  getters:{
 
  }
})
  1. state 用来存储共享数据的
  2. export default new Vuex.Store({
  state: {  
     //存储共享数据的
     msg:"张波跟了我7给月了",
     num:15,
     isshow:true
  },
  mutations: {
    
  },
  actions: {
  },
  getters:{
 
  }
})
  3. 组件中使用state中的数据
  4. {{$store.state.msg}}

//js    this.$store.state.xx
  5. mutations ：只有mutations才能更改state中的数据
  6. export default new Vuex.Store({
  state: {  
     //存储共享数据的
     msg:"张波跟了我7给月了",
     num:15,
     isshow:true
  },
  mutations: {   //只有mutations才能更改state中的数据
      plusOne(state){
         //state是用来读取state中的数据
         state.num++
      }
  },
  actions: {
  },
  getters:{
 
  }
})
  7. 带参数修改数据
  8. export default new Vuex.Store({
  state: { 
     //存储共享数据的
     msg:"张波跟了我7给月了",
     num:15,
     isshow:true
  },
  mutations: {   //只有mutations才能更改state中的数据
      plusN(state,n){
        //state是用来读取state中的数据
        state.num=state.num+n   //state.num+=n
     }
  },
  actions: {
  },
  getters:{
 
  }
})

  9. 组件中使用

    <button @click="$store.commit('plusN',10)">+N</button>

    注意：调用mutations只能传递一个参数，如果要传递多个参数需要使用到对象

  • export default new Vuex.Store({
  state: {  
     //存储共享数据的
     msg:"张波跟了我7给月了",
     num:15,
     isshow:true
  },
  mutations: {   //只有mutations才能更改state中的数据
     plusAll(state,n){
      //state是用来读取state中的数据
      console.log(n)
      console.log(n.a)
      console.log(n.flag)
   }
  },
  actions: {
  },
  getters:{
 
  }
})
  • 组件中使用
  • <button @click="$store.commit('plusAll',{a:12,flag:true})">+N</button>

6.Vuex  的运行机制

  • Vuex提供数据（state）来驱动试图（vue components），通过dispath派发actions，在其中可以做一些异步的操作，然后通过commit来提交mutations，最后mutations来更改state。

7.vuex 的数据持久化

         Vuex 页面刷新数据丢失怎么解决？

  • vuex中的数据一刷新就清空了，所以要对vuex数据实现持久化

  • 使用第三方插件 vuex-persist实现持久化

  • 1下载第三方插件

    cnpm install --save vuex-persist

  • store.js中引入

  • import Vue from 'vue'
import Vuex from 'vuex'

//持久化
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})

Vue.use(Vuex)
export default new Vuex.Store({
    state: {  //存储共享数据的
    carts:[]   //共享的购物车数据
  },
  mutations:{
    
  },
  actions:{},
  getters:{},
  // 持久化
  plugins: [vuexLocal.plugin]

})

8.vuex 的简介方法 --- 映射

         映射方法可以让我们使用 Vuex 的方法是更加简洁会减少大量的代码

  1. mutations 和 actions 需要映射到 methods 里，
  2. 而 state 和 getters 则需要映射到 computed 里
export default new Vuex.Store({
  state: {
    str: "我是映射过去的 state 方法"
  },
  mutations: {
    fun1(){
      console.log("我是映射过去的 mutations 方法")
    }
  },
  actions: {
    fun2() {
      console.log("我是映射过去的 actions 方法")
    }
  },
  getters: {
    haha() {
      return "我是映射过去的 getters 方法"
    }
  },
  modules: {}
})

调用

<template>
  <div id="app">
      {{str}} -------- {{haha}} 
      <br>
      <button @click="fun1">mutations</button>
      <button @click="fun2">actions</button>
  </div>
</template>

<script>
//	引入各种映射方法
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
  name: "App",
  methods: {
  	//	用扩展用算符把需要的方法用下面的语法扩展出来
    ...mapMutations(["fun1"]),
    ...mapActions(["fun2"])
  },
  computed:{
 	//	用扩展用算符把需要的方法用下面的语法扩展出来
    ...mapState(["str"]),
    ...mapGetters(["haha"])
  }
};
</script>

映射方法传参

export default new Vuex.Store({
  state: {
    str: "我是映射过去的 state 方法"
  },
  mutations: {
    fun1(state,can){
      console.log("我是映射过去的 actions 方法")
      console.log(can)
    }
  },
  actions: {
    fun2(state,can) {
      console.log("我是映射过去的 actions 方法")
      console.log(can)
    }
  },
  getters: {
    haha() {
      return "我是映射过去的 getters 方法"
    }
  },
  modules: {}
})

调用

<template>
  <div id="app">
      <button @click="fun1('mutations')">mutations</button>
      <button @click="fun2('actions')">actions</button>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
  name: "App",
  methods: {
  	//	映射方法传参需要写成对象格式才可传参
    ...mapMutations({
      fun1:"fun1",
    }),
    ...mapActions({
      fun2:"fun2"
    })
  }
};
</script>

9.还有 vuex 的模块化

  • 根目录下新建store文件夹

  • 右击store新建js文件 ---store.js

// 导入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 将vuex安装为Vue得插件
Vue.use(Vuex)	
// 创建store得实例对象
const store =new Vuex.Store({
  state:{}
})

// 导出store得实例对象
export default store
  • main.js中导入store得实例对象，并挂载到vue得实例上面

//1 导入store得实例对象
import store from './store/store.js'

const app = new Vue({
    ...App,
    // 将store挂载到vue实例上
    store
})

  • store目录下新建cart.js

  • cart.js中，初始化vuex模块

export default {
  // 为当前模块开启命名空间
    namespaced:true,
    state:{
      carts:[],
    },
    mutations:{
      setname(state){
        
      }
    },
    getters:{
      
    }
}
  • 在store/store.js文件中，导入并挂载购物车得vuex模块
// 1导入购物车得vuex模块
import cartmodule from './cart.js'
import loginmodule from './login.js'
// 将vuex安装为Vue得插件
Vue.use(Vuex)
// 创建store得实例对象
const store =new Vuex.Store({
  modules:{
    // 2挂载购物车得vuex模块  模块内得成员访问路径调整为 m_cart
    // 读取购物车模块中得state得数据  m_cart/carts
    cart:cartmodule,
    login:loginmodule
  }
})
  • 在我得页面中使用store中得数据
<template>
  <view>
    <view v-for="(item,index) in carts"  :key="">
      {{item}}
    </view>
  </view>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    data() {
      return {
        
      };
    },
    computed:{
      // ...mapState('模块得名称',['要映射得数据名称'])
      ...mapState('m_cart',['carts'])
    }
  }
</script>

上一篇：vue学习---Vuex


下一篇：vuex的四个参数 state mutations actions getters