PS：现在的版本Vuex 都内置了，不用下载，直接导入挂载启动   赢取白富美！

 

1.导入

　　1.1 根目录新建 store ，store下面新建 index.js

　　

　　1.2 写入代码啦啦啦啦

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


//安装Vuex插件
Vue.use(Vuex);

//创建实例
const store = new Vuex.Store({});

//导出
export default store;

View Code

 

2.挂载

main.js 导入 和 挂载

 

 

3.使用【测试】

　3.1 回到store中的index.js 我们往里加配置【数据】

 

 

创建store实例的时候 ，构造里面有option参数，里面计入模块。

　　

　　3.2 创建独立模块

回到store文件夹 ，创建一个module文件夹存放模块，，，然后创建search.js ，相当于创建一个独立模块。

 

export default {
    //独立命名空间
    namespaced:true,
    //通过 state 声明数据
    state:() => {
        return {
            msg:'hello Vuex'
        }
    }
}

View Code

 

然后在 store中的index 注册这个模块。【导入和注册】

 

 3.2 实例使用state的值：

　　我在一个组件上使用刚定义的search模块里面state的msg的值 “hello vuex” ：

1.在组件导入 mapState ,从 vuex导入，

2.必须在 “计算属性”下 注册 state 的数据，导入后的数据可以直接被使用，就想使用data中的一样：

 

 

然后我直接使用：

 

 

 即：