如何用nodejs搭建vuex

一、如何用nodejs搭建vuex

1、1，安装完成node，node有自带的npm，可以直接在cmd中，找到nodeJs安装的路径下，进行命令行全局安装vue-cli。（npm install--global vue-cli）

2、----想安装速度快点，可以使用淘宝镜像如下

3、----命令提示符执行npm install cnpm-g--registry=

4、注意：安装完后最好查看其版本号cnpm-v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

5、2，安装后，检查是否安装成功（显示版本则安装成功）。（vue-V）

6、3，使用vue建一个项目名叫“my-project”。（vue init webpack my-project）

7、----注：vue-cli的模板包括 webpack和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js中。

8、----webpack-simple相对简单的，它根目录下才有个 webpack.config.js。

9、4，注意：项目建立过程中，有如下选择，选择NO。（该选项为使用ESLint规范你的代码，一个空格错误都将报错，不开启，可以避免不必要的麻烦）

10、----ESLint规范建议开启，加强代码规范

11、5，建立项目后，安装项目依赖npm install

12、6，安装成功，项目目录下多出一个node_modules文件夹

13、7，进入项目目录文件夹（my-project）中，就可以使用vue进行开发啦

14、8，使用npm run dev，便可以打开本地服务器实时查看效果（localhost:8080）

二、vuex怎么实现存储和取值

Vue数据存储和页面传值

1、一，创建两页面，跳转-传值1，这里我们用Vue框架自带的页面HelloWord.vue，然后自己创建一个页面textVue.vue，并且放在一个文件下componebts，当然文件位置可以改变，为了图简单。

1、一，创建两页面，跳转-传值1，这里我们用Vue框架自带的页面HelloWord.vue，然后自己创建一个页面textVue.vue，并且放在一个文件下componebts，当然文件位置可以改变，为了图简单。

2、vue跨代传值的方法如下：页面1当点击提交按钮的时候，调用vuex的保存方法，将文本内容存储到vuex中。然后页面2使用watch钩子函数，监听vuex中内容的变化，如果改变了，那么就执行对应的函数。

3、可以通过vuex完成组件之间的传参，包括数组对象等，这也是作者建议的做法，构建大型项目管理的状态过多不可能都通过url的方式传递参数的。

4、v-on：绑定事件，语法=v-on：事件类型=函数(调用)，调用的函数定义在methods中，vue会自动到里面寻找对应的函数去执行v-model：数据的双向绑定，指定的数据需要在data里进行定义。

5、这个还是很简单粗暴的，目前正在研究，应该可以实现代替Vuex的数据状态管理方案。因为Vuex不太适合Vue3的环境，应该可以有替代方案了。

6、.实际实现：监听浏览器的刷新，刷新之前把vuex存在本地，在路由拦截处获取本地储存，放进vuex并删除本地存储，可以自由控制存localstorage和sessionStorage，完全避免插件来消耗性能。

vuex实现原理

1、首先使用vue.use(vuex)表明vuex是vue的插件，只能被vue使用——实例化Store并传入参入——Store注入到根组件上。以上三个步骤便可以使用vuex实现数据在组件中的共享了。

1、首先使用vue.use(vuex)表明vuex是vue的插件，只能被vue使用——实例化Store并传入参入——Store注入到根组件上。以上三个步骤便可以使用vuex实现数据在组件中的共享了。

2、vuex原理是VUEX很单一，store对象只要注册到main.js里面，只要被vue注册之后，vue里面所有层级关系的组件都可以使用。使用状态去管理和操作DOM，改变UI，不是使用过去的那种直接操作DOM的方式。

3、Vuex原理面试是专门为Vue服务，用于管理页面的数据状态、提供统一数据操作的生态系统，相当于数据库mongoDB，MySQL等，任何组件都可以存取仓库中的数据。其中vuex类似的还是有Redux，Redux大多用于React，针对Redux后续在做补充。

4、vuex的原理：vuex实现了一个单项数据流，在全局又有一个state存放数据，当组建要更改state中的数据时，必须通过Mutation进行，mutation同时提供了订阅者模式供外部插件调用获取state数据的更新。

5、vuex解决了vue项目中的数据状态管理问题是组件通信的一种方式。原理：创建了单一的状态树，包含state，mutation，action，getter，module。

vuex是一个插件，所以需要Vue.use注册了vuex，我们就可以在vue里配置store了getters这里多了个配置getters，他可以看作是基于state的computed属性。

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

uni-app也像小程序一样有globalData，这是一种简单的全局变量机制globalData是简单的全局变量，如果使用状态管理，请使用vuex项目文件结构在main.js中导入store文件。

应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。

1、如果vuex里面state的数据名称跟页面中的计算属性名称相同，就可以使用mapState映射函数，自动生成页面中的计算属性。

2、vuex是一个插件，所以需要Vue.use注册了vuex，我们就可以在vue里配置store了getters这里多了个配置getters，他可以看作是基于state的computed属性。

3、Vuex有五大核心，state，getter，mutation，action，module。

4、简而言之，Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果想修改它里面的数据，得按照Vuex提供的方式来修改。

5、假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可。

三、vuex的五个属性及使用方法

vuex的五个属性及使用方法如下：

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。

回调函数就是我们实际进行状态更改的地方，并且它会接受 state作为第一个参数，提交载荷作为第二个参数。

4. action：和mutation的功能大致相同，不同之处在于==》1. Action提交的是 mutation，而不是直接变更状态。 2. Action可以包含任意异步操作。

5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

新建vue项目testApp==》在testApp中建store文件==》 store文件下又有modules文件夹和getter.js和 index.js==》 store文件下建user.js

在项目的main.js中引入 import store from'./store'