vuex使用过程和详解

写在最前面！还是要去vuex官网看原来的解释

地址在此，会使用的就直接去看官网吧。

https://vuex.vuejs.org/zh/

这个图很是直观地解释了这个vuex的原理。
Ok，那我们接下来先说如何使用。

vuex的使用

步骤1 安装

cnpm install vuex --save

步骤2 引入

首先，根据vuex官网推荐的项目结构，我们新建store文件夹，以及相应的文件

授人以鱼不如授人以渔
我们在这里就只写一部分简单的使用，模块化的等读者自己摸索

我们在store.js中写入下面代码，代码对应的有注释

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

//引入之后，对vuex进行引用
Vue.use(Vuex)

//创建且声明一个对象
export const store = new Vuex.Store({
    state: {
        isShow: true,
        items: [
            {
                name: "张三",
                num: "1"
            },
            {
                name: "李四",
                num: "2"
            },
            {
                name: "王五",
                num: "3"
            }
        ]
    },
     // // 2. getters
     getters:{
        // 参数列表state指的是state数据
        getitemsFn(state){
            return state.items;
        }
    },
    // 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.items = name;//将传参设置给state的city
        }
    }
})

在main.js中代码

import { store } from './store/store'

new Vue({
    store: store,//使用store
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

步骤3 在页面中使用

我们在一个组件页面中使用

    methods: {
        backFn: function (index) {
            // 调用vuex的ations设置城市的值
            this.$store.dispatch('setCityName', this.cityArr)
            console.log('itemList', this.itemList)
        },
    },
    computed: {
        itemList() {
            return this.$store.state.items
        },
    },

html展示部分

<p v-for="item,index in itemList"
                   :key="item.num">
                    <span @click="backFn(index)">
                        {{item.num}}{{item.name}}
                    </span>
                </p>```

#### 步骤 4 我们看下效果
**原页面**
![在这里插入图片描述](https://img-blog.csdnimg.cn/a7bd34593f934cfdac04c20cadcadc91.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56ys4pGm5Liq5YmN56uv,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)



**点击过后**
![在这里插入图片描述](https://img-blog.csdnimg.cn/2dbec6ca01b34499947c6f9f45d173b2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56ys4pGm5Liq5YmN56uv,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)