首页 > 其他分享> > Vuex 全部问题和使用使用

Vuex 全部问题和使用使用

2021-11-19 20:30:16 作者：互联网

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:{
 
  }
})

state 用来存储共享数据的

export default new Vuex.Store({
  state: {  
     //存储共享数据的
     msg:"张波跟了我7给月了",
     num:15,
     isshow:true
  },
  mutations: {
    
  },
  actions: {
  },
  getters:{
 
  }
})

组件中使用state中的数据

{{$store.state.msg}}

//js    this.$store.state.xx

mutations ：只有mutations才能更改state中的数据

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

带参数修改数据

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:{
 
  }
})

组件中使用
```
<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 的方法是更加简洁会减少大量的代码

mutations 和 actions 需要映射到 methods 里，
而 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>

标签：Vuex,state,actions,mutations,全部,使用,vuex,store
来源： https://blog.csdn.net/weixin_61334593/article/details/121419452

Vuex 全部问题和使用使用

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

vuex 的概念和作用

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

vuex 的安装

vuex 的使用场景

Vuex 如何使用

Vuex 的运行机制

vuex 的数据持久化

vuex 的简介方法 --- 映射

还有 vuex 的模块化