vuex的使用案例

借鉴博客：

　　https://segmentfault.com/a/1190000011914191

　　https://www.cnblogs.com/mica/p/10757965.html

 

一、vuex介绍：

　　vuex：其实相当于一个存储数据的容器

 

　　vuex有4个属性：state、getters、actions、mutations

state:　　　　作用：用来自定义一些变量

getters:     作用：里面写用来获取state里数据的方法

actions:     作用：里面写api接口方法

mutations:  作用：用来触发事件，（就是在这里面写方法来使用getters属性，从而操作state里面的数据）

vuex容器里所有的操作，都要通过mutations来操作。

 

 

二、项目中怎么使用vuex

　　1、创建一个store目录，里面创建一个store.js文件，store.js里面的内容可以设计成这样：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
let store = new Vuex.Store({
    // 1. state
    state:{
        city:"城市名"
    },

    // // 2. getters，与组件的computed类似，用来实时监听state的最新变化
    getters:{
        // 参数列表state指的是state数据
        getCityFn(state){
            return state.city;
        }
    },
    // 3. actions
    // 通常跟api接口打交道
    actions:{
        // 设置城市信息
        // 参数列表：{commit, state}
        // state指的是state数据
        // commit调用mutations的方法 
        // name就是调用此方法时要传的参数
        setCityName({commit,state}, name){
            // 跟后台打交道
            // 调用mutaions里面的方法
            commit("setCity", name);
        }
    },
    // 4. mutations
    mutations:{
        // state指的是state的数据
        // name传递过来的数据
        setCity(state, name){
            state.city = name;//将传参设置给state的city
        }
    }
});

export default store;

 

　　2、然后在main.js中引用封装了vuex代码的store.js文件

import store from './store/store.js';  //引入后就可以有组件页面使用this.$store来调用vuex里面的方法了

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

 

 　　3、然后随便找个组件页面，来调用vuex中的state属性中的city变量数据：

<p>测试vuex：(把城市数据存入到vuex中)</p>
<el-row>
   <h1>{{getCityName}}</h1>
</el-row>




在js中的computed里面写上getCityName方法，返回vuex中的state属性中的city，看city的数据能不能出来

//computed方法用来侦听属性，与watch监听差不多，但不同的是computed结果会缓存，调用里面的方法不用加()，直接写方法名调用
computed:{
    getCityName:function(){
        return this.$store.getters.getCityFn; //从vuex里面拿state中的city变量数据
    }
},

 

 　　4、然后看页面效果：

 

 

　　5、修改vuex存储的city变量值：

this.$store.dispatch("setCityName", "北上广深");

　　　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

。