深入了解Vue.js中的Vuex状态管理模式

带梦飞翔

Vuex

Vuex 是一个专为 Vue.js 开发的状态管理模式。主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），页面多并且一层嵌套一层的传值，非常麻烦，这个时候我们就用vuex来维护共有的状态或数据。
vuex一共有五大核心概念
1.state: 用来定义数据的（相当于data），在页面中用获取定义的数据用：

1. this.$store.state.变量名

复制代码

getters：计算属性（相当于vue中的computed）,依赖于缓存，只有缓存中的数据发生变化才会重新计算。getters中的方法接收一个state对象作为参数。

1. 如：
   
2. state:{
   
3.         count: 1
   
4. },
   
5. getters:{
   
6.      getCount(state) {
   
7.          return state.count + 1
   
8.      }
   
9.   },

复制代码

在页面中获取用：

1. this.$store.getters.getCount
   
2. <h2>{{this.$store.getters.getCount}}</h2>

复制代码

mutations：是修改 state 值的唯一方法，它只能是同步操作
在页面中获取用：

1. this.$store.commit("方法名")
   
2. //可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
   
3. store.commit('increment', 10)
   
4. // ...
   
5. mutations: {
   
6.   increment (state, n) {
   
7.     state.count += n
   
8.   }
   
9. }

复制代码

actions：提交的是 mutations，而不是直接变更状态，它可以包含任意异步操作

modules: 模块，Vuex允许将store分割成模块，每个模块都拥有自己的state,getters,mutations,actions,甚至嵌套模块。可以避免变量名相同而导致程序出现问题。

1. const moduleA = {
   
2.   state: {},
   
3.   mutations: {},
   
4.   actions: {},
   
5.   getters: {}
   
6. }
   
7. const moduleB = {
   
8.   state: {},
   
9.   mutations: {},
   
10.   actions: {},
    
11.   getters: {}
    
12. }
    
13. export default new Vuex.Store({
    
14.   modules: {
    
15.     a: moduleA,
    
16.     b: moduleB
    
17.   }
    
18. })
    
19. // 在各自的模块内部使用
    
20. state.price // 这种使用方式和单个使用方式一样，直接使用就行
    
21. //在组件中使用
    
22. store.state.a.price // 先找到模块的名字，再去调用属性
    
23. store.state.b.price // 先找到模块的名字，再去调用属性

复制代码

使用


安装vuex

1. npm install --save vuex

复制代码

配置vuex

在src文件夹下新增一个store文件夹，里面添加一个index.js文件

然后在main.js中引入store文件下的index.js

1. // main.js内部对vuex的配置
   
2. import store from '@/store/index.js'
   
3. new Vue({
   
4.     el: '#app',
   
5.     store, // 将store暴露出来
   
6.     template: '<App></App>',
   
7.     components: { App }
   
8. });

复制代码

之后我们开始进行store文件下的index.js配置

1. import Vue from 'vue'; //首先引入vue
   
2. import Vuex from 'vuex'; //引入vuex
   
3. Vue.use(Vuex)
   
4. export default new Vuex.Store({
   
5.     state: {
   
6.         // state 类似 data
   
7.         //这里面写入数据
   
8.     },
   
9.     getters:{
   
10.         // getters 类似 computed
    
11.         // 在这里面写个方法
    
12.     },
    
13.     mutations:{
    
14.         // mutations 类似methods
    
15.         // 写方法对数据做出更改(同步操作)
    
16.     },
    
17.     actions:{
    
18.         // actions 类似methods
    
19.         // 写方法对数据做出更改(异步操作)
    
20.     }
    
21. })

复制代码

举例：
在store中定义商品的原价，计算折扣价，根据用户输入的数量和商品原价计算出总价
【1】我们约定store中的数据是以下形式

1. import Vue from 'vue'; //首先引入vue
   
2. import Vuex from 'vuex'; //引入vuex
   
3. Vue.use(Vuex)
   
4. export default new Vuex.Store({
   
5.     state: {
   
6.         price: 100, // 原价
   
7.         total: '',  // 总价
   
8.     },
   
9.     getters:{
   
10.         // 折扣价
    
11.         discount(state, getters) {
    
12.             return state.price*0.8
    
13.         }
    
14.     },
    
15.     mutations:{
    
16.         // 计算总价：第一个参数为默认参数state, 后面的参数为页面操作传过来的参数
    
17.         getTotal(state, n) {
    
18.             return  state.total = state.price * n;
    
19.         }
    
20.     },
    
21.     actions:{
    
22.         // 这里主要是操作异步操作的，使用起来几乎和mutations方法一模一样
    
23.         // 除了一个是同步操作，一个是异步操作，一个使用commit调用，一个使用dispatch调用
    
24.         // 这里就不多介绍了，有兴趣的可以自己去试一试，
    
25.         // 比如你可以用setTimeout去尝试一下
    
26.     }
    
27. })

复制代码

【2】在页面中使用store中的数据

1. ```javascript
   
2. <template>
   
3.   <div>
   
4.     <p>原价：{{price}}</p>
   
5.     <p>8折：{{discount}}</p>
   
6.     <p>数量：<input type="text" v-model="quantity"></p>
   
7.     <p>总价：{{total}}</p>
   
8.     <button @click="getTotal">计算总价</button>
   
9.   </div>
   
10. </template>
    
11. <script>
    
12.   export default {
    
13.     data() {
    
14.       return {
    
15.         quantity: 0,
    
16.       }
    
17.     },
    
18.     computed: {
    
19.       price() {
    
20.         return this.$store.state.price
    
21.       },
    
22.       discount() {
    
23.         return this.$store.getters.discount
    
24.       },
    
25.       total() {
    
26.         return this.$store.state.total
    
27.       }
    
28.     },
    
29.     mounted() {
    
30.     },
    
31.     methods: {
    
32.       getTotal() {
    
33.         this.$store.commit('getTotal', this.quantity)
    
34.       }
    
35.     },
    
36.   }
    
37. </script>

复制代码

【3】页面效果

再举例应用场景：
比如登录页面，既可以用手机号验证码登录，也可以用手机号密码登录，进行切换的时候想保留输入的手机号码，这个时候我们可以用vuex。

页面刷新数据丢失问题

vuex存储的数据作为全局的共享数据，是保存在运行内存中的，当页面刷新时，会重新加载vue实例，vuex里的数据会重新初始化，从而导致数据丢失。
怎么解决？
直接在vuex修改数据方法中将数据存储到浏览器缓存中（sessionStorage、localStorage、cookie）

1. import Vue from 'vue';
   
2. import Vuex from 'vuex';
   
3. Vue.use(Vuex);
   
4. export default new Vuex.Store（{
   
5.     state: {
   
6.        orderList: [],
   
7.        menuList: []
   
8.    },
   
9.     mutations: {
   
10.         orderList(s, d) {
    
11.           s.orderList= d;
    
12.           window.localStorage.setItem("list",jsON.stringify(s.orderList))
    
13.         },  
    
14.         menuList(s, d) {
    
15.           s.menuList = d;
    
16.           window.localStorage.setItem("list",jsON.stringify(s.menuList))
    
17.        },
    
18.    }
    
19. }）

复制代码

在页面加载时再从本地存储中取出并赋给vuex

1. if (window.localStorage.getItem("list") ) {
   
2.         this.$store.replaceState(Object.assign({},
   
3.         this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
   
4. }

复制代码

到此这篇关于深入了解Vue.js中的Vuex状态管理模式的文章就介绍到这了,更多相关Vuex状态管理模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/284031.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！